outlook中的html模板

发表于 | | 阅读次数:
字数统计: 679

虽然outlook的兼容令人难过，不过开心的是，只要你搞定了它，其他邮件也基本不会有太大问题；

关于outlook的兼容性须知

outlook使用的是word的HTML渲染引擎，基本上只支持HTML2。

所以此时，

  1. 放弃js，放弃H5，放弃CSS3。

  2. 放弃掉DOCTYPE,html,head,body标签，直接从body的内部开始写；因为outlook渲染时可能会把这些标签都删除掉；

  3. 放弃div+css布局，推荐使用table布局;
  4. 使用内联样式；
  5. 能使用属性就不要使用样式；

一些实现上的提示

1 布局：table

根据查到的资料，和伟大的实践真理，只有table布局最稳妥。其他布局都会由于解析原因出现一些这样那样的问题；

对于表格来说，需要注意的样式or属性如下:

  1. 边框，默认设置border，表格内边框和外边框之间会有缝隙，所以一般都要使用style="border-collapse: collapse;"令边框合并；

    • 对于表格的边框样式，一定要每个单元格都设置才能全部生效；
    • 如果需要设置整个表格的外边框样式，要把表格的border属性设为0，否则样式会被表格默认黑色边框覆盖，无法显示；

  2. 边距：

    • 对于outlook来说table的padding属性和cellpadding是一个效果；不过不推荐使用padding，最好使用表格属性；
    • cellspacing一般设置为0，基本和普通html一致；

  3. 宽度，表格布局，记得加上这行：

    1
    <tr><th style="width: 100%"></th></tr>

    防止手机上显示全挤在一个单元格里；

2 图片

  • 大小的设置：

    在outlook中，用style来设置宽高是无效的；需要直接使用width="10" height="10"属性来设置，不需要写单位；

    值得一提的是，如果图片使用的不是路径，而是base64，那么宽高设置即使是属性也无效；

  • outlook显示不支持透明背景的显示，会直接变成白色背景；

所以，总结一下，对于outlook，很多时候需要在图片本身进行一些处理，因为很多样式会无效；

如何预览你的html邮件模板

  1. 用编辑器写好一个html页面；
  2. 用IE打开你的页面；【推荐IE，其他浏览器也可以；推荐IE，预览效果和outlook比较接近；
  3. 复制整个页面，对，是渲染后的页面；
  4. 打开outlook，新建邮件，粘贴进去。这就是你的模板在outlook邮件里的样子了；

参考：

怎样写出兼容Outlook2010的HTML邮件

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

0%