Html Outlook 2013呈现问题:嵌套表截断相邻文本
在开发html电子邮件时事通讯时,我经常使用类似以下的结构:Html Outlook 2013呈现问题:嵌套表截断相邻文本,html,html-email,html-rendering,outlook-2013,Html,Html Email,Html Rendering,Outlook 2013,在开发html电子邮件时事通讯时,我经常使用类似以下的结构: <table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc"> <tr> <td> <table border="0" align="left"> <tbody> <tr> <td
<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
<td>
<table border="0" align="left">
<tbody>
<tr>
<td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
</tr>
</tbody>
</table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>
表格单元格中的文本。
和另一行文本。
和第三行。
你好这是示例文本。这是另一句话。你好这是示例文本。这是另一句话。你好这是示例文本。这是另一句话。
在浏览器中查看时,结果如下所示:
但当Outlook 2013呈现时,主(黄色)表中最左边的文本被截断:
对此有何解释或解决办法
(我通常会在内部(粉色)表格中放置一个图像,而不是文本。这允许一种设计,其中主(黄色)文本似乎围绕图像流动。无论是图像还是文本,结果都是相同的。主(黄色)表格中的文本被截断,如图所示。)我不确定Outlook 2013有什么问题,但您可以尝试使用div结构实现相同的布局 HTML:
尝试在标题表上设置左对齐,在我的代码中,这将适用于所有客户端。 在litmus中为所有客户测试:
<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<!-- spacer for the top of the image -->
<td align="left" colspan="2">
<img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
</td>
</tr>
<tr>
<!-- the image or text -->
<td align="left">
<img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
</td>
<!-- spacer for the right of the image -->
<td align="left">
<img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
<tr>
<!-- spacer for the bottom of the image -->
<td colspan="2" align="left">
<img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
</tbody>
</table>
<!-- here your tekst -->
<div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
</td>
</tr>
</tbody>
</table>
你好这是示例文本。这是另一句话。你好这是示例文本。
有时可接受的解决方案(将align=“left”
添加到标题/父表)不起作用(在我的情况下,多个嵌套表):
将mso表rspace
添加到左对齐的表中确实有效:
遗憾的是,这在Outlook 2013中根本不起作用。div的宽度与黄色div顶部的红色div相同。绿色div根本不会出现,除非您将内容放入其中。遗憾的是,div结构不能解决任何与电子邮件客户端相关的问题。即使这在outlook中修复了它,它也会在其他地方破坏它。我知道这很悲伤
.outer {
width : 50%;
height : 50%;
background-color: green;
}
.first {
background-color: red;
float : left;
}
.second {
background-color: yellow;
}
<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<!-- spacer for the top of the image -->
<td align="left" colspan="2">
<img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
</td>
</tr>
<tr>
<!-- the image or text -->
<td align="left">
<img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
</td>
<!-- spacer for the right of the image -->
<td align="left">
<img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
<tr>
<!-- spacer for the bottom of the image -->
<td colspan="2" align="left">
<img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
</tbody>
</table>
<!-- here your tekst -->
<div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
</td>
</tr>
</tbody>
</table>