脆弱的HTML邮件模板

5,606 阅读3分钟

在开展我们的项目时,在一些方面,如:注册确认、营销推广等,都需要以给用户发邮件的方式,进行沟通,但是我们编写的HTML邮件,很多主流邮箱都会或多或少的过滤掉一些东西,所以就要考虑如何编写才是能兼容各种。

本文原创发表于所问数据HT前端团队:ht.askingdata.com/article/5b9…

模板问题

  1. iframe为代表的模版不支持特殊标签包括html5新特性:如:button、nav、footer,这些会被过滤掉。
  2. div为模板,不支持定义style类名的方式写样式,会被过滤掉
  3. 无法使用@media做自适应布局
  4. 无法引入外联样式,比如bootstrap。
  5. css3样式大部分不支持

图例

解决思路:

先从整体布局方式说起,常见的两种方式就是iframe和div。 首先iframe它其实已经是一个被废弃了,但是在163、sina等这类邮箱,它是在用iframe的。至于为什么会用iframe……

  1. iframe能够原封不动的把嵌入的网页展现出来。
  2. 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
  3. 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。
  4. 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

第二种布局table,为什么要用table代替div原因如下:

  1. Div+css布局不完全被邮件客户端支持
  2. Div+css邮件的机制很容易导致css不能正常解析

因为head里面的内容会被过滤掉的原因,我们不要写<style>标签、不要写class,所有CSS都用style属性,什么元素需要什么样式就用style写内联的CSS。所以说可以的话,就用标签的自带属性,也是比较方便的。table属性是我们整个邮件的重要部分,所以它的一些自带属性,大家可以去网上搜索一下,都是比较基础的,在这里就不一一列举了。

回到样式上,其实直接写内联样式的话,是比较麻烦的,所以,我们在写样式的时候,可以先以class的方式书写,其后使用:tonny-zhang.github.io/pages/css_f… 将内联样式转换成嵌入样式。

无法使用@media,主要认为是@media是全局的,而我们需要改变的东西是局部的,所以说不适合用。 无法引入bootstrap等外联样式,因为上面说过的,它会把head过滤掉,所以说引入了也是没有用的。 至于它不支持大部分CSS3属性,就是不支持,也不知道为什么,嘿嘿。 而且它对背景图片的支持也不太理想,还有就是图片要写上alt属性,因为就算图片不出来,至少还有个提示嘛。 如果有比较复杂的布局,不要用float,position之类的,因为也会被过滤,我们就用table就可以的。

模板封装

在项目中会有各种邮件的发送,但是有些产品信息,公司信息是不会改变的,所以说,将邮件封装成模板。

<table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#fff" collapse>
    <tr>
          <td valign="middle" style="color:#333">
                <table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff" border="0" align="center" class="border-collapse">
                    ……
                </table>
          </td>
    </tr>
</table>

整体的大table可以像如上这样写。 对于像字体、间距、行高,我们可写一个公共类,到时候用前面我给予的网站去转换一下就好了。

最后

一个邮件的样子也是非常重要的,它也是项目的一部分,并且作为一个可研究的东西,也是非常有价值的。 奋斗吧,猿们。