HTML邮件兼容性

部分1：

布局使用 table以及table 嵌套（避免colspan / rowspan），table / tr / td / span / img / a，避免div / p
table边框<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"></table>
body 外的内容几乎没用
在body内写样式（Gmail会删除所有style）或者内联样式
属性先于样式，<img style="width: 10px; height: 10px;" src="*.png" />改为<img width="10" height="10" src="*.png" />，常用属性width、height、bgcolor、align、valign
每个标签单独指定样式，例如table的font-family
背景图片，<td background="*.png"></td>
width 和 height 属性不加单位，<img width="10px" height="10px" src="*.png" />改为<img width="10" height="10" src="*.png" />
图片的margin 和padding，建议<img vspace="10" hspace="10" src="*.png" />
字体、颜色、加粗，font: 12px / 14px Arial, sans-serif;color: #999;改为line-height: 14px;font-size: 12px; font-family: "微软雅黑", Arial, sans-serif; color: #999999; 加粗使用b而不是font-weight
行高，OutLook 有默认最小行高，使用OutLook 自定义属性mso-line-height-rule:exactly（该属性只在块元素上有效）来取消限制（这种实现方式有点瑕疵，就是会导致大号字体无法垂直居中），<td style="mso-line-height-rule: exactly; line-height: 36px;"></td>

部分2：

出于兼容性的考虑，border="0" 和 style="border:0;"，双重保障
只要不是行内的图片，样式 style="display:block;border:0 none;margin:0;pading:0;" 几乎是标配。
尽可能不要使用span，因为其在某些邮箱里会导致换行。
如果不想邮件被转发后支离破碎，邮件最好不要用多个 table 拼装，而是要嵌套起来。
iframe内容是作为独立的document，以iframe作为展现方式的邮箱
图片上务必加上alt，所有的图片都要定义高和宽；
制作一份和邮件内容一样的web页面，然后在邮件顶部写一句话，类似：“如果您无法查看邮件内容，请点击这里查看”

　　示例代码：

<body style="margin: 0; padding: 0;">
　<table align="center" border="1" cellpadding="0" cellspacing="0" width="600" style="border-collapse: collapse;" background="background.gif">
    　<tr>
    　　<td bgcolor="....."> Row 1 </td>
    　</tr>
    </table>
</body>

汇总于https://blog.csdn.net/weixin_30662109/article/details/96447425

https://docs.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201(v=office.12)?redirectedfrom=MSDN

https://www.cnblogs.com/dolphinX/p/4081828.html

猜你喜欢