阅读 157

html邮件踩坑小结

简述:

工作中需要创建并发送html邮件,由于之前没有写过类似的html页面,项目中遇到不少问题,故在此记录下来。
复制代码
  • 不同的邮件应用渲染邮件内容的方式不一样,一部分是把页面内容作为一个div内嵌在邮件页面内,另一部分是使用独立的<iframe>包装起来的独立页面。这个问题的结果是邮件页面只有html的<body>部分,不识别<style>标签和<script>标签,所以html邮件的样式要全部写成行内样式(重要)。
  • 客户读取邮件的方式不尽相同,从客户端到浏览器再到移动端app,因此写样式时要注意适配所有平台。
  • 布局使用<table>。各种应用渲染邮件的方式千差万别,其中最有代表性的或许就是微软的outlook。不同于大部分浏览器上可以识别各种标签和样式,outlook使用word的渲染引擎,<div>+css布局在这里彻底失效,并且由于是<table>布局,定位和浮动也没有了用武之地。
  • 除了使用<table>布局外,还要注意的一点就是要进行默认样式的覆盖。不同浏览器会给某些标签添加默认样式,如果不做兼容,在这种浏览器和邮箱中显示的样式差别也相当大。由于没有外部样式,所以只能写大段的内联样式。
  • 能用属性就不用样式。比如图片宽高,使用width="20";height="30"书写,注意,通过属性控制尺寸时不要带单位!!!在outlook客户端中不支持marginpadding属性。必要时可以尝试hspacevspace
  • 此外,由于项目需求,我在邮件中使用了富文本模板渲染,真的是徒增很多麻烦,由于只能写行内样式,富文本生成的标签样式根本不受控制,在此做出提醒。

总结:html邮件由于各种邮件应用渲染方式不同以及outlook这个独特的存在,建议大家设计时以大尺寸图片为主,减少像素级布局,填充内容不宜太灵活以免增加样式负担。

参考:HTML 邮件兼容问题与解决方案

关注下面的标签,发现更多相似文章
评论