发送邮件时Gmail出现css加间距、删css或破坏table标签问题

你遇到的CSS被加间距、CSS被删除、table结构被破坏的问题，均属于Gmail邮件HTML解析机制的常见兼容问题，对应修复方案如下： #

样式相关问题修复（CSS加间距/被删除） #

• Gmail完全不支持外部样式表，<head>内的<style>块内容也会被部分过滤，所有样式必须行内写入对应标签的style属性，不要集中写公共样式
• 避免使用CSS简写属性，例如不要写padding: 5px 10px，要拆分为padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px的完整写法，Gmail解析器碰到简写属性大概率会误加空格甚至直接删除整条样式
• 不要使用媒体查询、伪类选择器、后代/兄弟选择器，这类样式会被Gmail直接整体删除

Table结构损坏问题修复 #

• 编写table代码时不要加多余的换行、空格、注释，Gmail会把table标签之间的空白字符识别为文本插入，直接破坏表格布局
• table的基础属性要同时写在标签属性和行内样式中，示例写法如下：
  <table width="600" cellpadding="0" cellspacing="0" border="0" style="width:600px;border-collapse:collapse;margin:0;padding:0;">
• 尽量减少table嵌套层级，嵌套层级超过3层的表格被Gmail篡改结构的概率会大幅提升，简单布局优先用单级table加单元格拆分实现

问题示意：
#

内容的提问来源于stack exchange，提问作者Muhammad Sajawal Younas