編集：画像を追加しました。
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>