編輯:添加圖像。HTML電子郵件地址 - 爲何在使用Outlook 2010打開郵件時不顯示某些元素?
我正在開發一個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>
編輯 - 添加圖片。 它正確顯示在Mail(osx),gmail,outlook 2007.不在Outlook 2010中。 –
我認爲它不是代碼在你的問題其Outlook 2010不支持圖像,我認爲:) – hello