ฉันกำลังพยายามสร้างเทมเพลตอีเมล แต่แสดงพื้นหลังสีดำสำหรับทั้งเอกสารในแอปอีเมล 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
