2020.03.10

从昨天中午开始开发邮件模板，到今天下午两点，终于搞定了主流邮箱的样式兼容问题。中间花了13小时，因为没有经验，所以踩了很多坑，总算趟出了一条路。

由于各大邮件系统所支持的HTML模板对css兼容性好坏不一，导致我开发时用的一些css样式属性完全不生效。经过不断的尝试，终于开发出了一套能够兼容主流邮箱的邮件模板。下面记录一下遇到的坑点，以及解决办法。

布局

table 布局，只能用table布局！所有和布局相关的属性基本都失效了，margin、padding、position在各个邮箱里支持的很不均衡，所以基本不能用了。所以对于垂直居中对齐，水平居中对齐，用table可以实现。虽然实现起来很麻烦，经常需要td标签里面再嵌套table，并且每个table标签最好设置属性border="0" cellpadding="0" cellspacing="0" width="100%" ，以保证样式的稳定，尤其是width属性，对于table和td最好都明确设置具体的值，否则会出现某些邮件里是100%，某些邮件里就是自动撑宽的样式。

对于想要padding效果的样式，可以采用嵌套table来实现，借助 td 标签的 align=“center” valign=“middle” 属性来保证居中：

<table border="0" cellpadding="0" cellspacing="0" width="100%" >
    <tbody>
      <tr>
        <td style="width: 100%;" align="center">
          <table width="80%">
            <!-- 这个table就居中了，并且与父容器有20%的间距 -->
          </table>
        </td>
      </tr>
    </tbody>
  </table>

也可以用border来实现：

<table border="0" cellpadding="0" cellspacing="0" width="100%" >
    <tbody>
      <tr>
        <td style="width: 100%; border: 10px solid #FFF" align="center">
          <!-- 这个容器就居中了，并且与父容器有10px的间距 -->
        </td>
      </tr>
    </tbody>
  </table>

对于想要类似margin的间距，就用空的tr标签，指定height即可。

对于table的使用，顺便说一下，只有td标签能嵌套其他元素，td里面可以写div、a标签等等，也可以嵌套table标签，这点要注意下。这次开发，让我对table稍微熟悉了。以前见到table总是发慌，现在不怕它了。

CSS3属性不要用

对于想要圆角的样式，border-radius属性不能用，很多邮箱都支持，但是也有不支持的。你以为你用了，它不支持就只是圆角不生效，展示成直角么？不支持的邮件里，对于border-radius的处理很尴尬，会展示类似于锯齿样式，很难看。

对于vw单位也不要用了，中国的一些邮箱支持的还可以，俄罗斯的有些邮箱不支持。

总之，css3的样式属性基本不要用了，邮件模板通用的开发守则就是table布局。

对于邮件模板HTML开发总结就这么多，后面再踩坑会继续补充，希望能帮到即将踩坑的你。