Outlook浏览器版CSS邮件样式不兼容问题求助

一、让样式在Outlook浏览器版生效的方法 #

Outlook对HTML和CSS的支持一直比较“特殊”，哪怕兼容性网站标注支持，实际渲染也可能出问题，试试这几个方案：

1. 给内部元素直接加内联样式
   Outlook有时候不会很好地继承父元素的样式，把样式直接写在<p>标签上：

<footer style="font-size: 9px;text-align: center;">
  <p style="font-size: 9px;text-align: center; margin: 0;">
    /.../
  </p>
</footer>

2. 用表格布局兜底
   邮件开发里表格是兼容性最强的布局方式，把footer内容放在100%宽度的表格中，样式写在单元格上：

<div style="font-size: 9px;">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td style="font-size: 9px; text-align: center;">
        <p style="margin: 0;">/.../</p>
      </td>
    </tr>
  </table>
</div>

另外，尽量避免用<footer>这类HTML5语义标签，换成<div>——部分旧版Outlook会忽略HTML5元素的样式。

3. 覆盖默认样式
   Outlook自带一些元素默认样式（比如<p>的默认边距），加上margin: 0这类属性，确保你的自定义样式能覆盖默认值，避免布局混乱。

二、常用邮件样式预览工具 #

• Litmus：支持预览几乎所有主流邮件客户端（包括Outlook各版本）的渲染效果，还能做兼容性测试
• Email on Acid：和Litmus功能类似，侧重兼容性检测与跨客户端预览
• Mailtrap：可以捕获测试邮件，在不发送给真实用户的前提下预览渲染效果，还能调试邮件内容
• 本地客户端测试：直接用Outlook桌面版/网页版测试，或者用Thunderbird搭配邮件测试插件

内容的提问来源于stack exchange，提问作者PlayHardGoPro