工作中遇到需要发邮件模板给客户发送凭证，踩坑踩出来一下规则：
1.所有样式必须行内，否则不起作用
大部分邮件客户端中不支持使用外置css样式，最好使用内联样式
2.所有布局必须使用table，复杂布局使用table嵌套或单元格合并
布局尽量使用table ，将页面拆分成由上到下几个模块，有几个模块用几个tr标签。
3.有的邮件客户端table默认有边框，需要在代码中取消
大部分邮件客户端table默认有边框，在行内样式中设为0即可
4.元素样式尽量拆开写，margin:0;>margin-top:0;…
元素样式拆开写，border，margin，padding，background等等
5.元素需要取消默认样式 padding-top:0…
像p标签，tr，tb标签很多都会有默认的padding和margin样式，会影响到页面布局
6.如果有上下间隔，尽量不使用padding和margin，使用空的table或tr元素
页面中所有上下间隔尽量使用空的tr标签，如果使用margin可能会造成问题
7.没有字号标签都添加font-size:0px;具体到标签再设置具体字号
页面尽量所有标签都设置字号为0，因为有的邮件客户端会塞入大量实体空格标签造成页面布局错乱
以上是我自己编写HTML邮件模板的在Outlook，Foxmail，163，QQ邮箱，阿里云企业邮箱测试踩坑得出的规则。
邮件模板中最好不使用CSS3，也不是说不能使用，比如border-radius在大部分邮箱中是有效的，但是在某些邮箱（Outlook）中不起作用。为了邮件显示不会错乱，尽量不要使用CSS3的属性用作布局等操作。
遇到的坑汇总(大家遇到其他坑也可以在评论区进行说明，说不定会帮到其他人)
坑1:
img标签的宽不用写到style里，写到外面且不需要单位，否则在outlook下会有问题
下面代码用了两个table标签布局，外层的table主要用来限制页面，内层table用来布局，按照规则2，将页面从上到下拆成几个模块，在内层tr中写页面布局。注意： 每个tr中td的数量要保持一致否则有的邮件客户端会补全
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin-top:0px;margin-bottom:0px;margin-left:0px;margin-right:0px; padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;font-size:0px">
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
<tr><td style="font-size:0px"></td></tr>
</table>
</table>
</body>
</html>
6360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
