HTML设计邮件模板的时候,遇到白边,背景background被过滤的坑,该怎么破?
二筒 发布于 1489721805

HTML邮件相信工作中经常会遇到,我本人就很喜欢看Apple的邮件,每一封都做的那么赞,赏心悦目。

最近工作中接到这个需求,需要做一个邮件模板,一开始太天真,用常规的思路去写,后来同事测试之后出现了不少问题。

Gmail里所有的样式里用到的position属性都被过滤掉了,background也一样被过滤,在outlook邮箱里会出现白边,那具体要怎么解决这些问题呢?

总之一句话,用table+css比较靠谱,可以参考下apple的邮件模板。

熟悉HTML都知道iframe完全是个独立的容器页面,与父页面没有任何关系。而div却整个邮箱页面的一个部分。这么看来DIV比iframe要严格的多。但不管是哪类邮箱,我们的目标肯定是保证大部分邮箱都能尽可能完美接收我们的邮件。为此列出一些编写规则:

1.javascript脚本文件毫无疑问,别说是操作DOM对象的属性,基于邮件安全性考虑,是被严格过滤,直接出局,不要用了。

2.不仅JS能被过滤,甚至CSS也会有部分过滤,类似于float、position等成非正常内容流的style会被部分邮箱过滤。

3.既然不能使用float左右布局,那么就只好用Table+CSS。

4.所有CSS避免使用外联写法,也不要用class,一律使用内联写法,避免与外部的CSS冲突导致页面乱了套。

5.少用图片,背景图不用CSS的background,有可能被过滤,所以使用table的background,虽然功能不及CSS,不过总比没的用好。。

不使用margin作为间距,使用padding,因为margin有些邮箱不支持。

6.少使用图片,用多了可能被当作垃圾邮件,而且每个图片要设置宽高,以免图片不能显示,并且加入Alt属性。

7.不要是的邮件布局太紧凑,留点宽度,避免不同邮箱可能出现文字溢出导致布局错乱。

8.不使用Flash、Java、Javascript、frames、i-frames、ActiveX 以及 DHTML。

最后还有一个问题,就是表格里图片在outlook邮箱里会出现白边,即使 table 使用了 cellpadding="0" cellspacing="0" border="0",白边还是会存在。

这个解决方法如下:

1) 确保 html code 內 <img> 附近沒有 white-space 或 line-break:

正确姿势:

<td><img src="xxx/image1.jpg" border="0"></td>

错误姿势:

<td><img src="xxx/image1.jpg" border="0"> 
</td>

 当然了 img 需要加 css "display:block"

<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img style="display:block;" src="xxx/image1.jpg" border="0"></td></tr>
<tr><td><img style="display:block;" src="xxx/image2.jpg" border="0"></td></tr>
</table>

 

所以,像上面这段代码这样写,应该不会出现白边的bug了