typ*_*hon 2 html css email internet-explorer html-email
我正在尝试创建一个电子邮件模板,但它在Windows邮件应用程序(用于桌面)和IE 10浏览器中显示整个文档的黑色背景,尽管背景是白色的.我试过两台不同的机器.
至少Thunderbird,Outlook,gmail,outlook.com,Chrome和Firefox似乎用白色背景正确显示它.该文档在w3c验证器中验证.
这是我的电子邮件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email</title>
<style type="text/css">
body {
padding: 0;
margin: 0;
font-family: 'Bitstream Vera Sans','DejaVu Sans', Tahoma, sans-serif;
font-size: 13px;
line-height: 1.65;
color: #222;
background-color: #fff;
}
.full-width {
width: 100%;
}
#main {
width: 580px;
}
#logo {
background-color: #fff;
}
.logo-text {
color: #332B23;
}
#left-col {
background-color: #658cab;
}
.left-col-content,
.left-col-content a {
background-color: #658cab;
color: #fff;
font-size: 12px;
}
#footer1, #footer2 {
font-size: 11px;
}
#footer1,
#footer1 a,
#footer1 td,
#footer1 p,
#footer1 div {
font-size: 11px;
color: #222;
}
#footer2,
#footer2 a,
#footer2 td,
#footer2 p,
#footer2 div {
font-size: 11px;
color: #ccc;
}
#footer1 a,
#footer2 a {
text-decoration: none;
}
td.padding0 {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-style: normal;
color: #332B23;
}
h1 {
margin: 0 0 21px 0;
font-size: 26px;
}
h2 {
font-size: 18px;
margin: 14px 0 0 0;
}
p {
font-size: 13px;
margin: 13px 0;
}
a {
font-size: 13px;
text-decoration: none;
color: #0B4973;
}
.logo {
}
.w5 {
width: 5px;
}
.w15 {
width: 15px;
}
.w30 {
width: 30px;
}
.w40 {
width: 40px;
}
.w128 {
width: 128px;
}
.w180 {
width: 180px;
}
.w365 {
width: 365px;
}
.vpadding110 td {
height: 110px;
}
.vpadding50 td {
height: 50px;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<table bgcolor="#fff" class="full-width" cellspacing="0" cellpadding="0" border="0">
<tr>
<td bgcolor="#fff" align="center" width="580">
<table id="main" cellspacing="0" cellpadding="0" border="0" width="580">
<tr>
<td width="580" align="left">
<table bgcolor="#fff" cellspacing="0" cellpadding="0">
<tr>
<td id="left-col" width="180" class="w180" valign="top" bgcolor="#658cab">
<table bgcolor="#fff" cellspacing="0" cellpadding="0">
<tr>
<td class="w180">
<table cellspacing="3" cellpadding="0" border="0">
<tr class="vpadding26"><td width="180" height="26"></td></tr>
<tr>
<td id="logo" width="180" class="w180" align="center" valign="middle">
Logo
</td>
</tr>
<tr class="vpadding26"><td width="180" height="26"></td></tr>
</table>
</td>
</tr>
<tr>
<td class="left-col-content w180" width="180">
<table cellspacing="0" cellpadding="14" border="0" align="left">
<tr>
<td>
<table cellspacing="0" cellpadding="5" border="0" align="left">
<tr class="vpadding50"><td height="50"></td></tr>
<tr>
<td width="180" >
Text Text
</td>
</tr>
<tr>
<td width="180">
Text Text
</td>
</tr>
<tr>
<td width="180">
Text Text
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="w30" width="30"></td>
<td id="right-col" class="w365" width="365" valign="top">
<table cellspacing="0" cellpadding="0">
<tr class="vpadding110"><td height="110"></td></tr>
<tr>
<td width="365">
<h1>In porttitor urna</h1>
</td>
</tr>
<tr>
<td width="365">
<h2>Lorem ipsum</h2>
</td>
</tr>
<tr>
<td width="365">
<p>Quisque posuere est nunc, vel adipiscing orci lobortis sit amet. Fusce at facilisis arcu, vel interdum neque. Aliquam sit amet nisl nec dui elementum convallis. Phasellus commodo nunc nec ligula luctus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pellentesque sapien tellus, vitae egestas libero vehicula et.</p>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0">
<tr class="vpadding110"><td height="110"></td></tr>
<tr>
<td width="365">
<h1>In porttitor urna</h1>
</td>
</tr>
<tr>
<td width="365">
<h2>Lorem ipsum</h2>
</td>
</tr>
<tr>
<td width="365">
<p>Quisque posuere est nunc, vel adipiscing orci lobortis sit amet. Fusce at facilisis arcu, vel interdum neque. Aliquam sit amet nisl nec dui elementum convallis. Phasellus commodo nunc nec ligula luctus tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pellentesque sapien tellus, vitae egestas libero vehicula et.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr id="footer2">
<td bgcolor="#2E221E" class="" width="580" valign="top" align="left">
<table cellspacing="0" cellpadding="12" border="0">
<tr>
<td width="193" valign="top" align="left">
Address<br />
Address<br />
Address<br />
Address<br />
</td>
<td width="193" valign="top" align="left">
<div>
Address<br />
Address
</div>
</td>
</tr>
</table>
</td><!-- td.w580 -->
</tr><!-- #footer2 -->
<tr class="vpadding10"><td width="580" height="10"></td></tr>
<tr id="footer1" >
<td width="580" class="w580">
<table bgcolor="#fff" cellspacing="2" cellpadding="0" border="0" align="center">
<tr>
<td width="15" class="w15"></td>
<td width="40" class="w40">Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
<td width="40" class="w40">
Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
<td width="40" class="w40">
Text
</td>
<td width="5" class="w5"></td>
<td width="128" class="w128" align="left">
Text
</td>
<td width="15" class="w15"></td>
</tr>
</table>
</td><!-- td.w580 -->
</tr><!-- #footer1 -->
</table><!-- #main -->
</td>
</tr>
</table><!-- .full-width -->
</body>
</html>
有人可以弄清楚为什么它在Windows邮件应用程序和IE 10中以黑色背景显示？
typ*_*hon 13
找到解决方案:bgcolor ="#fff"→bgcolor ="#ffffff.