Windows Outlook/Office365邮件渲染：宽度、间距、按钮异常求助

横幅图片右侧细空隙修复 #

这是Outlook搭载的Word渲染引擎的经典基线对齐bug，按以下顺序调整即可解决：

• 给所有横幅<img>标签添加display: block内联样式，同时硬编码写死图片的width、height属性值，不要用百分比、不要缺省尺寸属性；Outlook默认给行内图片留4px左右的基线占位空隙，块级化后会直接消除
• 包裹图片的父级<td>必须补全cellpadding="0" cellspacing="0" border="0"三个原生属性，同时添加font-size: 0; line-height: 0;内联样式，屏蔽Outlook给空单元格默认追加的行高占位
• 如果是多图拼接的横幅，相邻<img>标签在HTML代码里不要留换行、空格，空白字符在Word渲染引擎下会被解析为可见空隙

按钮下划线、位置错位修复 #

样式迁移到父级<td>后触发的兼容问题，按以下规则调整：

• 按钮内的<a>标签必须直接添加三个核心样式：text-decoration: none !important;、display: inline-block;、mso-line-height-rule: exactly;；Outlook默认给所有a标签加内置下划线，父级设置的text-decoration无法穿透覆盖，必须直接作用在a标签本身
• 不要把按钮的内边距全放在父级td上，将padding、背景色、边框、圆角样式直接写在<a>标签上，父级td仅保留水平/垂直对齐属性即可；圆角按钮需要搭配VML形状做兜底，否则Outlook下会强制显示为直角
• 按钮外层嵌套的ghost table必须写死固定宽度，不要用自适应宽度，同时给table加border-collapse: collapse;内联样式，避免单元格边框合并逻辑导致的偏移
• 给按钮所在的td加mso-padding-alt: 0;属性，强制覆盖Outlook给单元格默认追加的内置内边距，消除错位

历史遗留问题补全方案 #

针对最开始遇到的td/table细间距、按钮文字异常高亮问题，补充适配规则：

• 所有嵌套的table标签统一补全border="0" cellpadding="0" cellspacing="0"原生属性，同时添加border-collapse: collapse; border-spacing: 0;内联样式；相邻<td>标签在代码中直接连写，不要留换行、空格，彻底消除单元格间隙
• 按钮文字异常高亮是Outlook给可点击元素默认加的系统高亮效果，给<a>标签加mso-highlight: none;内联样式，同时给按钮内的文字套一层<span>，在span上同步写死文字颜色、text-decoration: none属性做双重覆盖即可

适配提示：Outlook对head区域内的样式表支持度极低，所有布局、视觉相关的属性尽量同时写HTML原生属性+内联style，不要依赖class选择器的样式，适配稳定性最高。

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