2020年4月10日
By: Chase

Email静态模板中的坑

  1. web页面不支持SVG, 不支持img相对位置引用.
  2. 不支持html5标签
  3. 仅支持部分flex属性
  4. 不支持CSS3
  5. 不支持z-index
  6. 过滤margin-top为负数
  7. 过滤style和link标签, 只能写内联样式, 内联样式不要写在body上, 部分邮箱会在body上重写style
  8. 部分邮箱过滤<br>换行符, 遇到换行最好换成俩块级元素写
  9. 部分邮箱会给p标签加入特定样式
  10. 各个邮箱的默认字体不一, 最好根据用户主要邮箱设置安全字体列表

自己写了个style转内联的小脚本, 仅支持.class样式转换, 多个html模板的话比较方便 https://github.com/chase-si/styleToInlineCss

Tags: 前端 浏览器兼容 html