我开发了一个简单的webmail客户端，它连接到一个帐户并将电子邮件下载到postgres数据库。问题是当我将内容（HTML）检索到div中时，当电子邮件具有css属性时，它会覆盖整个页面的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, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;">
<center>
<!--[if !mso]><!-->
<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"> </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 <strong>inteligentes</strong> antecipam seus</span></div>
<div style="text-align: center;"><span style="font-size:24px">planejamentos para <u>reduzir seus custos</u>, e SIM podemos ajudar!</span></div>
<div style="text-align: center;"><br></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div><span style="font-size:14px">Olá, </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 falar sobre 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 <strong>Asia Print </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 quem se destina este e-mail, </em><br></div>
<div><em>para quando podemos agendar uma ligação? </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> Velasco</em></div>
<div><br></div>
<div><em>E-mail: </em><a data-cke-saved-href="mailto:vendas@asiaprint.com.br" href="mailto:vendas@asiaprint.com.br" target="_blank" class="validating" style="color: rgb(103, 40, 51);"><em>vendas@asiaprint.com.br</em></a></div>
<div><em>Telefone: <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]
答案 0 :(得分：1)
如果您不想从电子邮件中删除当前的内联样式，您有两种选择：
答案 1 :(得分：1)
您可以使用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>
答案 2 :(得分：0)
在我看来，最简单，最跨浏览的解决方案是在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中的样式不会泄漏到主文档中的样式中，反之亦然。