Outlook 2010/2013中的html無法正確呈現，但在html文件中可以正常工作
[英]html in outlook 2010/2013 is not rendering properly but working fine in html file
問題描述
HTML文件在瀏覽器中運行正常，但在Outlook 2010/2013中無法正確觸發。
有很多空白和空白問題，即使邊框在img標簽上也不起作用
任何幫助都是非常可觀的。 您可以找到以下代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
MESC 2014
</title>
<style type="text/css">
/*<![CDATA[*/
.logo {
text-align:right;
}
body{font-family:Arial; font-size:15px; line-height:1.5; }
.padding15{padding:15px;}
/*]]>*/
</style>
</head>
<body>
<table width="600" border="0" cellpadding="2" align="center">
<tbody>
<tr>
<td colspan="2">
</td>
<td align="right" style="padding:10px 0 15px 0;">
<a href="http://www.test.com"><img src=
"http://test.com/test/testt/images/emailLogo.png"
width="131" height="36" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" width="600" height=
"160">
<tbody>
<tr>
<td>
<img src=
"http://test.com/test/testt/images/MESC%20banner%202014.jpg"
width="600" height="160" style=
"border-top: 1px solid #808080; border-bottom: 1px solid #808080; " />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mktEditable" id='area1' colspan="3" style=
"line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f">
Hello Sir/Madam,<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style="font-size:18px; padding:25px 10px"
class="mktEditable" id='area2'>
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_11.png"
width="63" height="61" alt=""style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area3'>
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_14.png"
width="63" height="61" alt="" style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area4'>
<strong>Lorem lipsum :</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_16.png"
width="63" height="69" alt=""style=";" />
</td>
<td colspan="3" style="padding:10px 0" width="400" class=
"mktEditable" id='area9'>
<strong>Lorem lipsum :</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style=
"font-size:18px; padding:20px 0 0 0;" class="mktEditable"
id='area5'>
<strong style=
"color:#f7931e; text-transform:uppercase;">Lorem lipsum
Lorem lipsum .</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td style="padding:0 20px;" width="80">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_18.png"
width="63" height="59" alt="" style=";" />
</td>
<td colspan="3" style="padding: 30px 0 0;" width="400"
class="mktEditable" id='area6'>
<strong>3 p.m. Tuesday, Aug. 19:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<col width="100px" />
<col width="50px" />
<td style="padding:0 20px;" width="100">
<img src=
"http://test.com/test/testt/images/MESC2014Visuals_18.png"
width="63" height="59" style=";" alt="" />
</td>
<td colspan="3" style="padding: 30px 0 0;" width="500"
class="mktEditable" id='area7'>
<strong>Lorem lipsum Lorem lipsum
ICD-10:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum!
</td>
</tr>
<tr>
<td colspan="3" style=
"color:#58595b; font-size:12px; text-align:justify; border-top:1px solid #73716f; padding-top:20px;">
ABOUT Lorem lipsum <br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum <br />
Learn more about us at Lorem lipsum.com. <a href=
'http://www.contactus.com' style=
"color:#f7931e;">Contact us</a>.
</td>
</tr>
</tbody>
</table>
</body>
</html>
1 個解決方案
解決方案1
1 2014-08-12 12:46:54
您已經使自己變得相當復雜。 您應該容易地制作了一個容器（100％）表，然后將其他表嵌套在其中。 像這里一樣，您已經像上面一樣使用幾乎所有的tds作為colspan3。 嘗試嵌套表格。
我也希望您查看https://www.campaignmonitor.com/css/以獲取電子郵件中的CSS支持。
我已經更新了代碼，但請確保您做嵌套表以最大程度地減少工作量。
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top">
<table width="600" border="0" cellpadding="2" align="center">
<tr>
<td colspan="2">
</td>
<td align="right" style="padding:10px 0 15px 0;" valign="top">
<a href="http://www.test.com"><img src=
"http://lorempixel.com/131/36/abstract/4"
width="131" height="36" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" cellpadding="0" width="600" height=
"160">
<tbody>
<tr>
<td style="border-top: 1px solid #808080; border-bottom: 1px solid #808080; padding:2px 0; ">
<img src=
"http://lorempixel.com/600/160/abstract/6"
width="600" height="160" />
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="mktEditable" id='area1' colspan="3" style=
"line-height:1.8; padding:20px 10px; border-bottom:1px solid #73716f" valign="top">
Hello Sir/Madam,<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum .<br />
<br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum.
</td>
</tr>
<tr>
<td colspan="3" style="font-size:18px; padding:25px 10px"
class="mktEditable" id='area2'>
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" style=
"font-size:18px; padding:20px 0;" class="mktEditable"
id='area5'>
<strong style=
"color:#f7931e; text-transform:uppercase;">Lorem lipsum
Lorem lipsum .</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum :
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="4">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="top" style="padding:15px 0">
<img src="http://lorempixel.com/63/61/abstract/9" width="63" height="61" alt=""style=";" />
</td>
<td width="20" style="font-size:1px; line-height:1px;"> </td>
<td class="mktEditable" id='area3' valign="top" style="padding:15px 0">
<strong>Our basecamp solutions:</strong><br />
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum Lorem lipsum
Lorem lipsum Lorem lipsum
Lorem lipsum.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
如何在 html 電子郵件中的 Outlook 2007、2010、2013 上使用不顯示
[英]How to use display none on outlook 2007, 2010, 2013 in html email
如何在Outlook 2007、2010和2013的HTML電子郵件中創建填充？
[英]How to create padding in html email for Outlook 2007, 2010 & 2013?
HTML電子郵件在Litmus中看起來不錯，但在Outlook 2010中卻壞了
[英]HTML Email looks fine in Litmus but broken in Outlook 2010
HTML電子郵件圖像可以在Outlook中正常工作，但不能在Outlook.com中正常工作
[英]HTML Email Images working fine in Outlook but not in Outlook.com
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Outlook 2010和Outlook 2013的電子郵件HTML模板
HTML電子郵件CSS無法在Outlook中正確呈現
正文上的HTML電子郵件背景在Outlook 2013中不起作用
如何在 html 電子郵件中的 Outlook 2007、2010、2013 上使用不顯示
HTML電子郵件-表格問題-Outlook 2007/2010/2013
如何在Outlook 2007、2010和2013的HTML電子郵件中創建填充？
在 html 中嵌入圖像在 Outlook 2010 中不起作用
HTML電子郵件在Litmus中看起來不錯，但在Outlook 2010中卻壞了
HTML電子郵件圖像可以在Outlook中正常工作，但不能在Outlook.com中正常工作
無法在Outlook 2013 HTML電子郵件中正確隱藏圖像
相關標簽