Outlook发信至Gmail时iPhone端Gmail应用签名垂直拉伸间距异常

问题成因 #

iPhone端Gmail应用有独有的HTML邮件渲染规则，和Outlook、Apple Mail的兼容性逻辑不同，触发拉伸的核心原因如下：

• 用来做间距的空只设置了padding/height，未显式指定font-size:0和line-height:0，Gmail iOS会自动给空单元格添加默认行高，凭空撑开垂直间距
• 所有img标签未设置display:block，Gmail默认将图片识别为行内元素，会自动在图片下方添加3-5px的额外间距，累计后就会出现明显的垂直拉伸
• 部分图片仅设置了高度/宽度单一属性，Gmail iOS会自动对图片做等比适配，连带拉伸父容器的高度
• 文字容器未显式设置行高，Gmail会自动注入默认行高，放大文字段落的上下间距

修复方案 #

按照以下规则修改签名代码即可解决问题：

• 所有用作间距的空补充样式属性，示例：
  原代码：<td style="padding: 10px;"></td>
  修改后：<td style="padding: 10px;margin:0;font-size:0;line-height:0;"></td>
  高度为20px的空单元格修改为：<td style="height: 20px;margin:0;font-size:0;line-height:0;"></td>
• 给所有标签补充样式：style="display:block;border:0;outline:none"，同时确保每个img的width、height属性和style内的宽高值一一对应，比如申请按钮的图片补充width属性：<img src="xxx" alt="Apply Now Button" height="30" width="对应宽度数值" style="height: 30px;width:对应宽度数值px;display:block;border:0;outline:none">
• 所有包含文字的div/td显式设置行高，比如姓名所在div修改为：<div style="font-family: Arial, sans-serif; font-weight: bold; font-size: 18px;line-height:1.2;" id="text-box">Richard Simon</div>
• 移除所有用来做间距的 ，替换成固定宽度的空设置间距，避免Gmail渲染空格时产生不固定的宽度/高度
• 给所有table标签添加样式style="table-layout:fixed;border-collapse:collapse;margin:0;padding:0"，固定表格布局，避免Gmail自动调整单元格宽高

内容的提问来源于stack exchange，提问作者Andrew Rivera