MENU

编写兼容Outlook邮件的Tips

• July 15, 2020 • Read: 134 • Code

  • 图片设置宽直接width=宽度,并在style中设置,因为在style中定义宽度Outlook不能识别,不单独设置高度,高度自适应即可。
  • 尽量避免使用div,会出现意想不到的效果

遇到的一个问题:

table中的td里使用div,a链接包裹div。底下会出现一条1px的白线直接把table分成两半,这里的白线实际上是两部分的间隔,如果table有背景色,那条线的颜色就是背景色。如下图所示:

OUTLOOK_ZDyaTTvmvQ.png

<td style="font-family:'微软雅黑',sans-serif;color:#ffffff;">
    <a href="www.google.com">
        <div style="font-weight:400;font-size:12px;font-family:'微软雅黑',sans-serif;color:#ffffff;">GET IT ON</div>
    </a>
    <a href="">
        <div style="font-size: 18px;font-weight:400;font-family:'微软雅黑',sans-serif;color:#ffffff; ">chrome web store</div>
    </a>
</td>

解决方法:

1、使用span替换div(推荐)

2、或者令table中的任意一个td撑开高度和table同高

  • a链接不能直接包裹table,设置了display: block或者display: table 在Outlook中依然无效。
  • 背景图的问题:

在outlook2016以下背景图不会被识别需要使用vml的方式来设置背景图。

在发邮件给自己测试的时候,需要在设置里设置更改文本、应用等大小100%,否则会出现背景图的宽和高与预期不一致。

如何在Outlook中写背景图

利用网站的工具生成:Bulletproof background images

  • Outlook制作newsletter一定要加preheader,不然邮件的摘要可能显示异常。
  • 在Outlook中给table设置边框不能使用rules属性,不管是内边距还是别的都会失效,只能在单元格上一个一个加border,虽然麻烦但是非常有效。
  • 不能使用HTML5和CSS3的任何特性

推荐阅读

  1. [Outlook HTML渲染引擎
  2. Email on Acid
  3. HTML Email 编写指南