HTML邮件模板编写注意事项

一、去掉默认样式

1. 去掉 table 默认边框，<table border="0"></table>
2. 去掉 img 默认边框,图片设置 display: block，<img src="./logo.gif" border="0" style="display:block"/>,
3. 不少客户端默认不显示图片,需要用户信任才显示
4. .background-color属性邮件基本支持，不过需要使用完整的16进制书写，例如#ffffff，不可缩略成#fff，否则部分邮件会失效；

二、布局

1. 使用 table 布局,
2. 样式使用行内样式
3. 样式能使用属性的使用自带属性,不能使用的使用行内样式, 如: <img src="./logo.gif" width="200" height="200" border="0" />, (如给一个table设置宽度为750px，width是标签属性之一，同时也是CSS样式属性之一，那么这时候我们最好用
   <td width="750"></td> 而不是 <td style="width: 750px"></td>)
4. 样式不使用缩写,如: background, padding 之类的
5. 上下间隔，尽量不使用 padding 和 margin，使用空的 table 或 tr 元素
6. 标签设置 font-size:0px; 具体到标签再设置具体字号
   (页面尽量所有标签都设置字号为0，因为有的邮件客户端会塞入大量实体空格标签造成页面布局错乱)
7. 邮件模板中最好不使用 CSS3
8. img标签的宽不用写到 style 里，写到外面且不需要单位，否则在outlook下会有问题
   <img width="60" height="60" alt="" />
9. 每个 tr 中 td 的数量要保持一致否则有的邮件客户端会补全

三、踩坑

1. outlook 中背景图无法显示，图片需要使用 img 标签
2. img 标签的宽不用写到 style 里，写到外面且不需要单位，否则在outlook下会有问题
   <img width="60" height="60" alt="" />
3. td 标签可以嵌入 table 标签，请不要再 a 标签中嵌入 table 标签，否则在outlook下会有问题,链接点击不会跳转，outlook 会过滤掉 a 标签.
   (1). 错误用法

<tr>
    <td>
        <a>
        <table></tr><td>文字</td></tr></table>
        </a>
    </td>
</tr>

(2) 正确用法 (a 标签放到 td 中,嵌套文字/图片,否则会被 outlook 过滤导致无法点击)

<tr>
    <td>
        <table></tr><td><a>文字<a></td></tr></table>
    </td>
</tr>

欢迎大家评论中分享更多邮件模板开发中的踩坑经验