邮件中嵌入html中要注意的样式

工做中常会有需求向用户发送邮件，须要前端工程师来制做html格式的邮件，可是因为邮件客户端对样式的支持有限，要兼容不少种浏览器须要注意不少原则：

1.邮件使用table+css布局

2.邮件主要部分在body内部，因此样式必定要写成内嵌的，不能在head标签中写style，也不能外联。

如：

<table border="0" cellspacing="0" cellpadding="0" style="font-family:'微软雅黑',Helvetica,Arial,sans-serif;font-size:14px " width="100%">
     <tbody>
                <tr>
                    <td style="font-family:Helvetica,Arial,sans-serif;font-size:14px;">
                    <table width="100%" border="0" cellpadding="5" cellspacing="0" >
                            <tbody>
                                <tr>
                                    <td>
                                        <p style="margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;margin-bottom: 20px"><br>　　　　　　　　　　　　　　　　　　　　　　　　　　尊敬的开发者：<br>　　　　　　　　　　　　　　　　　　　　　　　　</p>
                                        <p style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;"><br>　　　　　　　　　　　　　　　　　　　　　　　　　“xxx”在这次的‘网络友好度测试’评级：<span style="color:#F44336;">4颗星</span>（最高5颗星）。<br>　　　　　　　　　　　　　　　　　　　　　　　　</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" style="color:#000;margin:0;font-size:14px;line-height:24px;font-family:'微软雅黑',Helvetica,Arial,sans-serif;text-align: left;margin:40px auto;border-collapse:collapse;">

这样设置border会在outlook中显示不出border；

5.为了保证兼容性，须要把邮件的宽度设置为600px，最大600px；

6.少用img，由于不少邮箱客户端默认不显示图片，因此，若是须要图片的话，必定要写好alt和title；

7.背景图片，尽可能用background-color使用纯色背景，若是必定要用背景图片，使用background属性，

<div background=”http://image1.koubei.com/images/common/logo_koubei.gif”></div>

8.邮件不支持javascript，flash以及一些特殊的标签。

因为邮件客户端对css支持各有不一样，因此必定要多测试再发送，保证样式的正确。若是出现了不兼容的状况，必定要耐心的使用最简单的方式进行兼容，尽可能少用特殊标签及比较复杂的属性。