outlook 邮件模板注意事项

时间 2019-11-07

原文原文链接

背景

最近在准备写一个html的邮件模板，在网上搜了下资料，而后用express结合reload搭建了一个环境，结合本身开发中遇到的一些坑，总结一下。html

注意事项

1 html的DOCTYPE 这个无需多言，网上不少资料都有介绍，使用最古老的声明文档

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>HTML Email编写指南</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="/js/reload.js"></script>
  </head>
复制代码

2 全局样式写在body里边这里我遇到过一个字体的bug，body里边的字体在mac的outlook客户端和网页端都是正常的，可是在window的outlook客户端上面，字体就变成了宋体，不是微软雅黑了，后来仍是全都写在行内样式里边去了。

<body
    style="margin: 0; padding: 0;font-family: 'Microsoft YaHei', '微软雅黑', sans-serif; "
  >
  </body>
复制代码

3 全部的布局样式都使用table格式

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background:#FAFAFA" >
</table>
复制代码

4 全部的样式采用行内样式
4.1 这里我遇到了一个问题，若是设置了line-height 和 td的高度同样的时候，会让样式不居中，因此最好使用td自身居中功能
4.2 当td里边的内容为空的时候，在mac的outlook端是正常的，可是到了window的outlook端，就会显示一条线，特别奇怪，因此若是有空的td的时候，里边最好放鸡哥空格

<td style="width: 108px;height:80px; padding-left: 30px;padding-right: 20px;" >
  <div style="font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;width: 108px;height:20px; color: #ffffff;line-height: 20px;font-size: 20px;font-weight: 700;" >
    dssdssds
  </div>
</td>
复制代码

4 td的宽度必须设置，否则就会拉宽

<td style="height:80px;">
      <div
        style="font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;width: 54px;height:18px; color: #ffffff;line-height: 18px;text-align: center;font-size:12px;border: 1px solid #ffffff;border-radius: 2px;font-weight: 300;"
      >
        企业版
      </div>
    </td>
复制代码

在window的outlook office 365下会表现的td的宽度超多54px，达到100px左右，因此必须在td上加上宽度express

<td style="height:80px;width：54px;">
      <div
        style="font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;width: 54px;height:18px; color: #ffffff;line-height: 18px;text-align: center;font-size:12px;border: 1px solid #ffffff;border-radius: 2px;font-weight: 300;"
      >
        企业版
      </div>
    </td>
复制代码

5 table里边的内容必需要用tr包一层
开始的时候，写了一个相似于这种结构的

<table>
    <tr>
        <table></table>
    </tr>
    <table></table>
</table>
复制代码

这种在mac的outlook和window的outlook的（office 365）下面都没有问题，可是在window的outlook（2016）下面整个外层的table也是居中，可是会把宽度拉的超级宽,只要加一层tr就能够解决这个问题。bash

<table>
    <tr>
        <table></table>
    </tr>
    <tr><table></table></tr>
</table>
复制代码