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>
我有一封电子邮件可以在网络应用程序和浏览器上正确呈现,但在 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>