邮件中嵌⼊html中要注意的样式
⼯作中常会有需求向⽤户发送邮件,需要前端⼯程师来制作html格式的邮件,但是由于邮件客户端对样式的⽀持有限,要兼容很多种浏览器需要注意很多原则:
1.邮件使⽤table+css布局
2.邮件主要部分在body内部,所以样式⼀定要写成内嵌的,不能在head标签中写style,也不能外联。
如:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td >
<table width="100%" border="0" cellpadding="5" cellspacing="0" >
<tbody>
<tr>
<td>
<p >                          尊敬的开发者:
                        </p>
<p >
                         “xxx”在此次的‘⽹络友好度测试’评级:<span >4颗星</span>(最⾼5颗星)。
                        </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
3.不能⽤浮动的⽅式定位。position:absolute;float:left;等都不⾏,float在qq邮箱客户端中可以识别,但是在outlook中⽆法识别。
4.表格的border,使⽤table上的border属性,可以在qq浏览器中兼容,但是在outlook中打开是没有边框的,这种情况,我么只能给每⼀个td加⼀个border,在table中使⽤border-collapse:collapse;来合并重复的边框。
如:
<table width="90%" border="1px" >
这样设置border会在outlook中显⽰不出border;
5.为了保证兼容性,需要把邮件的宽度设置为600px,最⼤600px;
6.少⽤img,因为很多邮箱客户端默认不显⽰图⽚,所以,如果需要图⽚的话,⼀定要写好alt和title;
div border属性7.背景图⽚,尽量⽤background-color使⽤纯⾊背景,如果⼀定要⽤背景图⽚,使⽤background属性,
<div background=”image1.koubei/images/common/logo_koubei.gif”></div>
8.邮件不⽀持javascript,flash以及⼀些特殊的标签。
由于邮件客户端对css⽀持各有不同,所以⼀定要多测试再发送,保证样式的正确。如果出现了不兼容
的情况,⼀定要耐⼼的使⽤最简单的⽅式进⾏兼容,尽量少⽤特殊标签及⽐较复杂的属性。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。