编辑：添加图像。
我正在开发一个 html 电子邮件模板。经过大量的血汗和泪水，现在在我们设计的邮件客户端中看起来或多或少相同：
http://i.imgur.com/aAPcvVv.png
但由于某种原因，Outlook 2010 不会显示副标题和主图像。
http://i.imgur.com/OvcDOYX.png
所有图像都存储在同一台服务器上，但只有徽标和 M 图标显示。
这是代码：
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Newsletter</title>
</head>
<body style="background-color:#f5f5f5; color:#695e4a; font-family: Arial, Helvetica, sans-serif; font-size:12px; margin-top:0px; padding:auto;">
<style type="text/css">
a, h1, h2, span, p {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
table, caption, tbody, tfoot, thead, tr, th, td{
margin: 0;
padding: 0;
/* border: 0;
*/ font-size: 100%;
font: inherit;
}
.readmore{
color:#246877;
text-transform: uppercase;
font-weight: bold;
font-size: 10px;
letter-spacing: 1px;
text-decoration: none;
}
</style>
<table style="padding:none; border:none; border-spacing:0; width:608px" align="center" cellspacing="0">
<tr>
<td rowspan="2" style="border-right: 1px solid #e9e9e9; width:3px; "></td>
<td colspan="2" align="right" style="background-color:#ffffff; font-family: Arial, " HelveticaNeue?,Helvetica,sans-serif;?="">
<br><a style="margin:50px 25px; font-size:9px; color:#b9b9b9; text-decoration:none" href="">View in browser</a>
<div style="border-bottom: 1px solid #f6f6f6; margin:5px 25px;"></div>
</td>
<td rowspan="2" style="border-left: 1px solid #e9e9e9; width:3px; "></td>
</tr>
<!-- Header with LOGO, date, category, BEFORE content -->
<tr>
<td style="width:275px; height: 89px; background-color:#ffffff; padding:10px 0px 10px 25px"><img src="[removed due to non disclosure contract]"></td>
<td style="text-align:right; width:275px; height: 89px; background-color:#ffffff; color:#6a604c; font-size:9px; text-transform:uppercase; line-height:13px; padding-right:25px;">
<span style="font-family: Arial, Helvetica, sans-serif;">Monday, July 1st, 2013<br>optional communication category</span>
</td>
</tr>
<!-- Heading Ribbon -->
<tr>
<td colspan="4" style="background-color:#dbd1cd; height:50px; padding-left:29px">
<table cellspacing="0">
<tr>
<td style="width:522px">
<h1 style="text-transform:uppercase; font-size:22px; font-weight: normal; color:#6a604c; font-family: Arial, Helvetica, sans-serif; padding-top: 17px;
line-height: 0px;">Minor change in membership Rules</h1>
</td>
<!-- Optional icon (mandatory, urgent etc) goes in this td -->
<td style="padding-right:25px; padding-left:25px; width:28px"><img src="[removed due to non disclosure contract]" align="right"></td>
</tr>
</table>
</td>
</tr>
<!-- shadow below ribbon -->
<tr>
<td colspan="4" style="height:4px;">
<img src="[removed due to non disclosure contract]">
</td>
</tr>
<!-- Features, contained in a nested table -->
<tr>
<td style="border-right: 1px solid #e9e9e9; width:3px; "></td>
<td colspan="2" style="background-color:#fff; border-bottom: 1px solid #e9e9e9;">
<table style="padding:none; border:none; border-spacing:0;">
<tr>
<td colspan="2" style="padding: 10px 25px; font-family: Arial, Helvetica, sans-serif;">
<h2>Font-family is specified in global styles for each element</h2>
<img src="[removed due to non disclosure contract]">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie augue ut rutrum interdum. Curabitur varius nisl nec velit dictum feugiat. Nam et augue posuere elit sodales mattis ut nec justo. Etiam auctor rutrum leo in vulputate. Ut eget sem malesuada, consequat ligula id, rutrum lacus. Aenean tempor, magna tincidunt lobortis rutrum, urna arcu mollis diam, nec fermentum arcu mi sed lectus.
</p>
<a class="readmore" href="">Read more</a>
</td>
</tr>
<tr>
<td style="padding: 10px 25px">
subtitle, image, excerpt, <a>read more</a>
</td>
<td style="padding: 10px 25px">
subtitle, image, excerpt, <a>read more</a>
</td>
</tr>
</table>
</td>
<td style="border-left: 1px solid #e9e9e9; width:3px;"></td>
</tr>
<!-- optional features -->
</table>
</body>
</html>