码迷,mamicode.com
首页 > Web开发 > 详细

HTML邮件兼容性

时间:2019-11-28 13:40:19      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:pac   页面   color   details   web   12px   http   col   ace   

部分1:

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

部分2:

  1. 出于兼容性的考虑,border="0" 和 style="border:0;",双重保障
  2. 只要不是行内的图片,样式 style="display:block;border:0 none;margin:0;pading:0;" 几乎是标配。
  3. 尽可能不要使用span,因为其在某些邮箱里会导致换行。
  4. 如果不想邮件被转发后支离破碎,邮件最好不要用多个 table 拼装,而是要嵌套起来。
  5. iframe内容是作为独立的document,以iframe作为展现方式的邮箱
  6. 图片上务必加上alt,所有的图片都要定义高和宽;
  7. 制作一份和邮件内容一样的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/

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

HTML邮件兼容性

标签:pac   页面   color   details   web   12px   http   col   ace   

原文地址:https://www.cnblogs.com/ljhblog/p/11948902.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!