メール テンプレートを作成しようとしていますが、Windows メール アプリ (デスクトップ用) と IE 10 ブラウザーで、背景が白であることを意図しているにもかかわらず、ドキュメント全体の背景が黒で表示されます。私は2つの異なるマシンで試しました。
少なくとも、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で背景が黒く表示される理由を誰かが理解できますか?