防止從內容加載到一個div的css覆蓋

我開發了一個簡單的webmail客戶端連接到一個帳戶，並下載電子郵件到postgres數據庫。問題是，當我檢索到內容（HTML）到一個div，當電子郵件具有CSS屬性，它覆蓋了我的整個頁面的CSS。防止從內容加載到一個div的css覆蓋

是否有任何解決方法來防止這種情況？

PS：我正在直接把HTML代碼中的div，一些這樣的：

<div id="html-container"> 
 
    My html loaded from DB 
 

 
</div>

編輯1：

我忘了提，我在整個頁面上使用twitter-bootstrap。

編輯2：

的下載和加載在DIV電子郵件爲例：

<!DOCTYPE html> 
 
<html xmlns:v="urn:schemas-microsoft-com:vml"> 
 
    <head> 
 
     <title>Com quem eu devo falar?</title> 
 
     <style type="text/css"> 
 
     v:* { behavior: url(#default#VML); display: inline-block; } 
 
     body { 
 
     max-width:600px; 
 
     margin:auto; 
 
     } 
 
     td { 
 
     cellpadding:0px; 
 
     border-spacing:0px; 
 
     } 
 
     tr { 
 
     cellpadding:0px; 
 
     border-spacing:0px; 
 
     } 
 
     table { 
 
     border-spacing:0!important; 
 
     border:none; 
 
     } 
 
     .containerbox { 
 
     width:100%; 
 
     max-width:600px!important; 
 
     font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
 
     } 
 
     #aweber_rem { 
 
     margin: 0 auto; 
 
     } 
 
     center > div { 
 
     box-sizing: border-box; 
 
     } 
 
     /*-----HEADER-----*/ 
 
     .headers { 
 
     color:#ffffff; 
 
     padding: 10px; 
 
     height:330px; 
 
     } 
 
     .headers .headline { 
 
     font-size:28px; 
 
     color:#ffffff; 
 
     font-weight: lighter; 
 
     } 
 
     .headers .paragraph { 
 
     font-size:14px; 
 
     color:#ffffff; 
 
     line-height:150% 
 
     } 
 
     .headers a { 
 
     color: #ffffff; 
 
     } 
 
     /*-----MAIN-----*/ 
 
     .main { 
 
     font-size:14px; 
 
     color:#4C4C4C; 
 
     padding: 10px; 
 
     } 
 
     .main .headline { 
 
     font-size:24px; 
 
     color:#4C4C4C; 
 
     } 
 
     .main .paragraph { 
 
     font-size:14px; 
 
     color:#4C4C4C; 
 
     line-height:150%; 
 
     } 
 
     .main a { 
 
     color:#672833; 
 
     } 
 
     /*-----ARTICLES-----*/ 
 
     .article { 
 
     font-size:14px; 
 
     color:#4C4C4C; 
 
     padding-top:10px; 
 
     padding-bottom:15px; 
 
     } 
 
     .article .headline { 
 
     font-size:20px; 
 
     color:#4C4C4C; 
 
     padding-bottom:5px!important; 
 
     } 
 
     .article .paragraph { 
 
     font-size:14px; 
 
     color:#4C4C4C; 
 
     line-height:150%; 
 
     } 
 
     .article .permalink { 
 
     text-align: right; 
 
     color:#672833; 
 
     } 
 
     .article td{ 
 
     padding:0px; 
 
     } 
 
     .article1 img{ 
 
     padding:10px 10px 0px 0px; 
 
     } 
 
     .article1 .paragraph{ 
 
     padding-top:5px; 
 
     } 
 
     .article3 img{ 
 
     padding:10px 0px 0px 10px; 
 
     } 
 
     .article3 .paragraph{ 
 
     padding-top:5px; 
 
     } 
 
     /*-----FOOTER-----*/ 
 
     .footers { 
 
     font-size:14px; 
 
     color:#4C4C4C; 
 
     padding:10px; 
 
     } 
 
     .footers .headline { 
 
     font-size:20px; 
 
     color:#4C4C4C; 
 
     } 
 
     .footers .paragraph { 
 
     font-size:12px; 
 
     color:#4C4C4C; 
 
     line-height:150%; 
 
     } 
 
     .footers a { 
 
     color:#672833; 
 
     } 
 
     /*-----MEDIA QUERIES-----*/ 
 
     /* Removes unwanted borders around hyperlinked images */ 
 
     a img { 
 
     border:0; 
 
     outline:none; 
 
     text-decoration:none; 
 
     } 
 
     /* Smaller Mobile Devices */ 
 
     @media only screen and (min-width:10px) and (max-width: 400px) { 
 
     .containerbox { 
 
     max-width:300px!important; 
 
     margin:0 auto!important; 
 
     clear:both!important; 
 
     } 
 
     .sidebar2 td { 
 
     display:block!important; 
 
     width:100%!important; 
 
     } 
 
     .main td { 
 
     display:block!important; 
 
     width:100%!important; 
 
     } 
 
     table { 
 
     width:100%; 
 
     } 
 
     .headline { 
 
     font-size:20px; 
 
     } 
 
     .paragraph { 
 
     font-size:16px; 
 
     } 
 
     img { 
 
     height:auto!important; 
 
     max-height:300px; 
 
     max-width:100%; 
 
     } 
 
     .share img { 
 
     width:20px!important; 
 
     height:auto!important; 
 
     display:inline-block; 
 
     } 
 
     } 
 
     /* Larger Mobile Devices */ 
 
     @media only screen and (min-width:401px) and (max-width: 500px) { 
 
     .containerbox { 
 
     max-width:100%!important; 
 
     margin:auto; 
 
     clear:both!important; 
 
     display: block; 
 
     } 
 
     table { 
 
     width:100%; 
 
     } 
 
     .sidebar2 td { 
 
     display:block!important; 
 
     width:100%!important; 
 
     } 
 
     .main td { 
 
     display:block!important; 
 
     width:100%!important; 
 
     } 
 
     .headline { 
 
     font-size:20px; 
 
     } 
 
     .paragraph { 
 
     font-size:16px; 
 
     } 
 
     img { 
 
     height:auto!important; 
 
     max-height:300px; 
 
     max-width:100%; 
 
     } 
 
     .share img { 
 
     width:20px!important; 
 
     height:auto!important; 
 
     display:inline-block; 
 
     } 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <center> 
 
     <div align="center"> 
 
      <div class="containerbox" style="width: 100%; max-width: 600px; font-family: HelveticaNeue-Light, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;"> 
 
       <center> 
 
        <!--[if !mso]><!--> 
 
        &nbsp; 
 
        &nbsp; 
 
        &nbsp; 
 
        <table cellpadding="0" cellspacing="0" bgcolor="" style="width: 100%; max-width: 600px !important; border-spacing: 0px; border-width: medium; border-style: none;"> 
 
        <!--<![endif]--> 
 
        <!--[if gte mso 9]> 
 
        <table cellpadding="0" cellspacing="0" bgcolor="" width="600" style="background-color:;"> 
 
        <![endif]--><!--Header--> 
 
        <tbody> 
 
         <tr style="border-spacing: 0px;"> 
 
          <td style="border-spacing: 0px;"> 
 
           <table align="center" cellpadding="「5」" cellspacing="0" width="100%" bgcolor="#262626" style="border-spacing: 0px; border-width: medium; border-style: none; background-color: rgb(38, 38, 38);"> 
 
           <tbody> 
 
            <tr style="border-spacing: 0px;"> 
 
             <td class="headers" background="https://www.aweber.com/images/email-templates/big-sale/red/red-header-img.png" style="text-align: left; border-spacing: 0px; color: rgb(255, 255, 255); padding: 10px; height: 330px; background-repeat: no-repeat;"> 
 
              <div class="region"> 
 
              <div aw-contents="1"> 
 
               <table class="row" style="width: 100%; border-spacing: 0px; border-width: medium; border-style: none;"> 
 
                <tbody> 
 
                 <tr aw-contents="1" style="border-spacing: 0px;"> 
 
                 <td aw-attributes="width, valign" class="container" aw-contents="1" width="auto" valign="bottom" style="width: auto; border-spacing: 0px;"> 
 
                  <div class="definition-parent"> 
 
                   <span> 
 
                    <table align="center" width="100%" class="floated-none" style="float: none; text-align: center; 
 
                    border-spacing: 0px; border-width: medium; border-style: none;"> 
 
                    <tbody> 
 
                     <tr style="border-spacing: 0px;"> 
 
                      <td style="padding: 0px 0px 12px; border-spacing: 0px;"> 
 
                       <a class="aw-image-link" href="http://clicks.aweber.com/y/ct/?l=OUro1&m=3Xk0aqxqKa2iwPe&b=aetSWlAcBZYgxYi4YNkk4g" style="color: rgb(255, 255, 255);"> 
 
                       <img align="center" class="model" border="0" aw-attributes="src,alt,width,height" style="margin: auto; width: 600px; height: 360px; border-width: 0px; border-style: none; outline-width: medium; outline-style: none; text-decoration: none;" src="https://hostedimages-cdn.aweber-static.com/Mzc4NTM4/optimized/e0e1f0f6631a4eec813abade96420a7b.png" alt="Outsourcing de Impressão" width="600" height="360"> 
 
                       </a> 
 
                      </td> 
 
                     </tr> 
 
                    </tbody> 
 
                    </table> 
 
                   </span> 
 
                  </div> 
 
                 </td> 
 
                 </tr> 
 
                </tbody> 
 
               </table> 
 
              </div> 
 
              </div> 
 
             </td> 
 
            </tr> 
 
           </tbody> 
 
           </table> 
 
          </td> 
 
         </tr> 
 
         <!--End Header--><!--Body--> 
 
         <tr style="border-spacing: 0px;"> 
 
          <td style="border-spacing: 0px;"> 
 
           <table align="center" cellpadding="「5」" cellspacing="0" width="100%" ="" bgcolor="#ffffff" style="border-spacing: 0px; border-width: medium; border-style: none; background-color: rgb(255, 255, 255);"> 
 
           <tbody> 
 
            <tr style="border-spacing: 0px;"> 
 
             <td class="main" style="text-align: left; border-spacing: 0px; font-size: 14px; color: rgb(76, 76, 76); padding: 10px;"> 
 
              <div class="region"> 
 
              <div aw-contents="1"> 
 
               <table class="row" style="width: 100%; border-spacing: 0px; border-width: medium; border-style: none;"> 
 
                <tbody> 
 
                 <tr aw-contents="1" style="border-spacing: 0px;"> 
 
                 <td aw-attributes="width, valign" class="container" aw-contents="1" width="auto" valign="top" style="width: auto; border-spacing: 0px;"> 
 
                  <div class="definition-parent"> 
 
                   <table cellpadding="0" cellspacing="0" border="0" class="headline-element" width="100%" 
 
                    style="border-spacing: 0px; border-width: medium; border-style: none;"> 
 
                    <tbody> 
 
                    <tr style="border-spacing: 0px;"> 
 
                     <td class="headline" style="padding: 10px; border-spacing: 0px; font-size: 24px; color: rgb(76, 76, 76);"> 
 
                      <div aw-variable="value"> 
 
                       <div style="text-align: center;"><span style="font-size:18px;"><span style="color:#696969;"><span style="font-family:trebuchet ms;"><span style="background-color:#FFFFFF;">OUTSOURCING/LOCAÇÃO DE IMPRESSORA</span></span></span></span></div> 
 
                      </div> 
 
                     </td> 
 
                    </tr> 
 
                    </tbody> 
 
                   </table> 
 
                  </div> 
 
                  <div class="definition-parent"> 
 
                   <div class="paragraph" style="padding: 10px; font-size: 14px; color: rgb(76, 76, 76); line-height: 150%;"> 
 
                    <div aw-variable="value"> 
 
                    <div><span style="font-size:20px">&nbsp;</span></div> 
 
                    <div> 
 
                     <table border="0" cellpadding="0" cellspacing="0" width="100%" class=" cke_show_border" style="border-spacing: 0px; border-width: medium; border-style: none;"> 
 
                      <tbody> 
 
                       <tr style="border-spacing: 0px;"> 
 
                       <td style="border-spacing: 0px;"> 
 
                        <div> 
 
                         <div 
 
                          style="text-align: center;"><span style="font-size:24px">Empresas&nbsp;<strong>inteligentes</strong>&nbsp;antecipam seus</span></div> 
 
                         <div style="text-align: center;"><span style="font-size:24px">planejamentos para&nbsp;<u>reduzir seus custos</u>, e SIM&nbsp; podemos&nbsp;ajudar!</span></div> 
 
                         <div style="text-align: center;"><br></div> 
 
                        </div> 
 
                       </td> 
 
                       </tr> 
 
                      </tbody> 
 
                     </table> 
 
                    </div> 
 
                    <div> 
 
                     <div><span style="font-size:14px">Olá,&nbsp;</span></div> 
 
                     <div><span style="font-size:14px"></span><br></div> 
 
                     <div> 
 
                      <span 
 
                       style="font-size:14px"></span> 
 
                      <table border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 763px; border-spacing: 0px; border-width: medium; border-style: none;" class=" cke_show_border"> 
 
                       <tbody> 
 
                       <tr style="border-spacing: 0px;"> 
 
                        <td style="width: 763px; border-spacing: 0px;"> 
 
                         <table border="0" cellspacing="0" cellpadding="0" width="100%" style="width: 763px; border-spacing: 0px; border-width: medium; border-style: none;" class=" cke_show_border"> 
 
                          <tbody> 
 
                          <tr style="border-spacing: 
 
                           0px;"> 
 
                           <td style="width: 763px; height: 490px; border-spacing: 0px;"> 
 
                            <div><em>Olá, bom dia!</em></div> 
 
                            <div><br></div> 
 
                            <div><em>Estou escrevendo com o intuito de encontrar a pessoa apropriada </em><br></div> 
 
                            <div><em>para&nbsp;falar&nbsp;sobre&nbsp;Outsourcing de Impressão,</em><br></div> 
 
                            <div><em> visando reduzir os custos de impressão de sua empresa e compras de Toner de Impressora.</em></div> 
 
                            <div><em>.</em></div> 
 
                            <div><em>A&nbsp;<strong>Asia Print&nbsp;</strong>, uma empresa com 16 anos de mercado, 
 
                             fornece soluções de impressão, </em><br> 
 
                            </div> 
 
                            <div><em>além de suprimentos cartuchos e toners, tanto original como compatíveis. </em><br></div> 
 
                            <div><em>Trabalhamos com as principais marcas do mercado Brother, </em><br></div> 
 
                            <div><em>HP, Lexmark, Epson, Samsung, dentro outras.</em></div> 
 
                            <div><br></div> 
 
                            <div><em>Garantimos o melhor PREÇO! Nos Toners compatíveis e originais!</em></div> 
 
                            <div><br></div> 
 
                            <div><em>Reduza seu custo de impressão, procure nossos 
 
                             consultores.</em> 
 
                            </div> 
 
                            <div><br></div> 
 
                            <div><em>Caso você seja a pessoa a&nbsp;quem&nbsp;se destina este e-mail, </em><br></div> 
 
                            <div><em>para quando podemos agendar uma ligação?&nbsp;</em><br></div> 
 
                            <div><em>Se não for você, me indicaria a pessoa de contato?</em></div> 
 
                            <div><br></div> 
 
                            <div><em>Agradeço a sua atenção!</em></div> 
 
                            <div><br></div> 
 
                            <div><em>Um abraço,</em></div> 
 
                            <div><br></div> 
 
                            <div><span style="background-color: 
 
                             initial;"><i>Elisângela</i></span><em>&nbsp;Velasco</em></div> 
 
                            <div><br></div> 
 
                            <div><em>E-mail:&nbsp;</em><a data-cke-saved-href="mailto:[email protected]" href="mailto:[email protected]" target="_blank" class="validating" style="color: rgb(103, 40, 51);"><em>[email protected]</em></a></div> 
 
                            <div><em>Telefone:&nbsp;<a data-cke-saved-href="tel:(11)%204117-9969" href="tel:(11)%204117-9969" value="+551141179969" target="_blank" class="validating" style="color: rgb(103, 40, 51);">(11) 
 
                             4117-9969</a></em> 
 
                            </div> 
 

 

 
[cutted by stack character limit]

來源

2017-04-07 ikk1

也許使用'！重要'在您的網站css的每個選擇器？ – Hackerman

我在整個頁面中使用引導程序。 – ikk1

'$（「＃html-container」）。find（「*」）.removeAttr（「style」）'？ – sweaver2112

您可以使用web components來封裝所有的CSS。

.test { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
}

<template> 
 
    <style> 
 
.test{ 
 
width:50px; 
 
height:50px; 
 
background-color:red; 
 
} 
 
</style> 
 
    My html loaded from DB 
 
    <span class="test">test</span> 
 
    
 
</template> 
 

 
<div id="html-container"></div> 
 

 
<span class="test">test</span> 
 

 
<script> 
 
    var tmpl = document.querySelector('template'); 
 
    var host = document.querySelector('#html-container'); 
 
    var root = host.createShadowRoot(); 
 
    root.appendChild(document.importNode(tmpl.content, true)); 
 
</script>

來源

2017-04-07 19:45:51 Alex

就像一個魅力。謝謝@亞歷克斯 – ikk1

如果你不想刪除從目前的內嵌樣式電子郵件你有兩種選擇：

學會生活的機智它 - 不是一個好的選擇，因爲你可能會在白色背景上以白色文本結束。
使用！在所有可能的選擇器中都很重要。主要是顏色和背景，以確保每個人都可以閱讀它的內容。它是優雅的嗎？最佳實踐？但是，這是獲得內聯樣式相關性的唯一方法。

來源

2017-04-07 19:41:16 floriano76

這更像是一個評論，而不是答案 – Hackerman

看起來我沒有評論主要問題的聲望。但這可以被認爲是一個答案。小心解釋爲什麼不呢？ – floriano76

http：// stackoverflow。com/help/how-to-answer – Hackerman

在我看來，最簡單和最跨瀏覽器的解決方案是一個iFrame來顯示電子郵件的內容。請注意，您可以生成使用JavaScript一定含量的iFrame，因此：

var iframe = document.createElement('iframe'); 
document.body.appendChild(iframe); 
var emailDoc = iframe.contentWindow.document; 
emailDoc.open(); 
emailDoc.write(
    '<head>' + 
     '<style>/* styles go here */</style>' + 
    '</head>' + 
    '<body><!-- content goes here ---></body>' 
); 
emailDoc.close();

在iFrame中的樣式不會泄漏到樣式的主文檔中，反之亦然。

來源

2017-04-17 22:19:09 guitarino

防止從內容加載到一個div的css覆蓋

回答

相關問題