由于HTML邮件不是独⽴的HOST在本站的页⾯，是寄⼈篱下的。所以编写HTML邮件与编写HTML页⾯有很⼤的不同。因为，各⾯向⽹民的主流邮箱都或多或少的会对它们接收到的HTML邮件在后台进⾏过滤。毫⽆疑问，JS代码是被严格过滤掉的，包括所有的事件监听属性，如onclick、onmouseover，这是基于邮件安全性的考虑。不仅如此，CSS代码也会被部分过滤。本⼈要讲的就是如何编写不被各⼤主流邮箱过滤的，能正常显⽰的HTML邮件。 ⾸先，我们先来看看邮箱是如何展现HTML邮件的。我本⼈没有做过邮件系统，况且各⼤邮箱后台的过滤算法也不是那么容易可以让外⼈知道的。所以，我们只能通过前端展现，来推测哪些是被邮箱接受的写法，⽽哪些⼜是会被过滤掉的。通过对gmail、hotmail、163、sohu、sina⼏个邮箱的分析，我把邮箱分为两类： 第⼀类包括gmail、hotmail、sohu，这类邮箱，邮件内容是被布局在整个邮箱页⾯中的某个div中。如图： 第⼆类，包括163、sina，这类邮箱，邮件内容被布局在独⽴的iframe中。如图：
熟悉HTML的朋友都知道，iframe内容是作为独⽴的document，与⽗页⾯的元素和CSS是互不相⼲的，⼏乎可以作为⼀个独⽴的页⾯来对待。⽽如果如果邮件内容是在div中，那么邮件内容是作为整个邮箱页⾯的⼀个组成部分。显然，以iframe作为展现⽅式的邮箱，对邮件内容就会宽容许多，因为它给了你⼀个⾜够独⽴的表现空间。⽽div就不是那么客⽓了。试想⼀下，如果你在你的邮件⾥写上这么⼀句CSS，是不是整个邮箱的展现页⾯上字体都变成20px⽽因此乱了套：
<style type=”text/css”>
body {font-size:20px}
</style>
我们需要写兼容各邮箱的统⼀邮件模板，那么必然就要避开以上这种外联CSS写法，另外类似于float、position等成⾮正常内容流的style也会被过滤，假如你写了，很可能会影响到外部邮箱的表现。
下⾯我列出⼀些编写原则：
1、全局规则之⼀，不要写<style>标签、不要写class，所有CSS都⽤style属性，什么元素需要什么样式就⽤style写内联的CSS。
2、全局规则之⼆，少⽤图⽚，邮箱不会过滤你的img标签，但是系统往往会默认不载⼊陌⽣来信的图⽚，如果⽤了很多图⽚的邮件，在⽚没有载⼊的情况下，丑陋⽆⽐甚⾄看不清内容，没耐⼼的⽤户直接就删除了。图⽚上务必加上alt。
3、不要在style⾥⾯写float、position这些style，因为会被过滤。那么如何实现左右布局或者更复杂的布局呢？⽤table。
5、div模式的邮箱不⽀持flash，iframe模式的有待验证。
最后提⼀句，sohu的邮箱很怪异，会在每个⽂本段后⾯加⼀个空格，导致原本正常的排版⼀⾏放不下⽽换⾏，从⽽使某些布局错乱。所以，如果你要兼容sohu邮箱的话，遇到⼀些紧凑的布局就要格外⼩⼼了，尽量减少⽂本段的数量，留⾜宽度。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议