HTML:Outlook 无法正确呈现电子邮件

HTML: Outlook not rendering correctly email

我有一封电子邮件可以在网络应用程序和浏览器上正确呈现,但在 Outlook 客户端上无法正确呈现,我已经尝试设置单元格间距、单元格填充、更改宽度,但无法让它在 Outlook 上正确呈现版本 2102(内部版本 13801.21106)

我已经将html存储在这个fiddlehttps://jsfiddle.net/w0x7rpvq/中并搜索评论<!--issuehere-->

在浏览器上看起来不错

更新 1

假设没有正确对齐 (https://jsfiddle.net/7sn95eLz/)

您的布局是使用每行三个单元格的 table 制作的。第一行仅包含一个单元格,使单元格的宽度与图像匹配 (190px)。这就是 Outlook 以如此窄的宽度显示文本的原因。它适用于其他浏览器,因为您将 display:block; 应用于包含全角文本的 <table>。但是 Windows 上的 Outlook 不理解这一点。

这里的解决方案是在包含全角文本的 <td> 中添加一个 colspan="3"

<!--issuehere-->
<td colspan="3" class="subtitle" valign="top" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 16px; color: #333333; font-weight: normal; padding: 0 0 20px 0; background:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>