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客户端后那些空格全部被转化成了 所以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布局,少用别的标签,内联样式。