Q: HTML Email模板 导入邮件或客户端格式混乱空隙大?

Q1：table在email导入后会有多出来的类似padding的样式？实际在web上看不出来

<table width="550" align="center" border="0" cellpadding="0" cellspacing="0" style="color:#9B9B9B; font-family:微软雅黑; ">
<tbody>
    <tr>
        <td height="20" style="background: #F00;">
            <table width="550" border="0" cellpadding="0" cellspacing="0" style=" width: 100%; padding: 0;" bgcolor="#00FF00">
                <tbody>
                    <tr><td>8888888</td></tr>
                </tbody>
            </table>
        </td>
    </tr>
</tbody>
</table>

Web效果：

Email客户端效果：

 

Q2：实际空隙比web效果要大？

Web效果：

Email客户端效果：

 一开始我以为是两个问题，以为一个是table布局默认有padding之类的，以为另一个是我使用了<ul><li>标签。

后来debug发现，这些格式混乱、间隙变大等，web样式与email客户端样式不一致的问题，都是因为html代码的格式空隙导致的，html导入email客户端后那些空格全部被转化成了&nbsp; 所以email客户端内样式会不一致甚至混乱！！

 

一开始试着手动减少代码空隙，但是不可能完全去除，而且再开发的时候因为代码格式混乱，就已经看不清自己在写什么了。。。最后发现，终极解决方案还是得：

使用构建工具gulp等进行html压缩，再导入email客户端

 

 

 

 

PS: 这篇文章不是写html email的编写规范指引的，我最近自己开发email html模板，也是在网上找了一堆指南来看，大同小异不知道原出处是哪，随便推荐一个快速入口：

【HTML Email 编写指南 http://www.ruanyifeng.com/blog/2013/06/html_email.html】

既然说到这，我还是总结一下html email模板的编写规则吧，看了很多指南保险做法，为了各种乱七八糟客户端的兼容，一句话总结就是：

一个html后缀文件，table布局，少用别的标签，内联样式。