兼容性
主要兼容海外主流邮箱设备,已确认和已测试过的:
- Gmail – web端、mac应用、移动端(安卓&IOS)
- Outlook – web端、mac应用、移动端(安卓&IOS)、windows客户端(16/19/21/23版本)
- 苹果icoud – 移动端IOS、mac内置邮箱应用
- Exchange(邮件服务器)
- 雅虎 – web端
全局规则
doctype,body
和meta
之类的标签一般不用写,因为在很多邮箱系统里它会被过滤;禁止外联CSS/JS/iframe,所有样式用style写内联的CSS;
少用图片,邮箱不会过滤你的img标签,但是系统往往会默认不载入陌生来信的图片,如果用了很多图片的邮件,在图片没有载入的情况下,会看不清内容,没耐心的用户直接就删除了。图片上务必加上alt;
全部使用table布局,避免使用float、position,flex布局,outlook不支持。推荐标签
table / tr / td / span / img / a
,尽量避免使用div、p及其他标签;不允许在
<tr>
元素上定义CSS样式,样式尽量定义在<td>
元素上(Gmail等邮件客户端会过滤<tr>
上的属性);充分利用标签的私有属性来布局,如width, height, bgcolor, background, align, valign等:
1
<img width="10" height="10" src="*.png" />
CSS属性不要简写,尤其padding属性–主要为了兼容outlook邮箱,如:
1
<td style="padding-left:16px;padding-top:24px;padding-right:16px;padding-bottom:0;">
关于字体–有时设计师会让你使用特定字体,而邮件里面一般使用的是系统支持的字体,如果不支持,将会变成默认字体;