部分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://www.campaignmonitor.com/css/email-client/outlook-2007-16/