Outlook给表格单元格内图片添加垂直白线的通用解决方案是什么？

解决方案 #

Outlook 对 HTML 邮件中的并排动态 GIF 渲染有特殊的规则冲突，结合你提供的代码可通过以下修改修复：

• 移除两个<img>标签所在<td>末尾的 冗余字符：该空格字符会触发 Outlook 额外渲染字符高度，即使设置了极小的font-size也无法完全消除。
• 给<img>标签补充明确的固定高度属性：你当前使用height:auto会导致 Outlook 对 GIF 高度计算出错，直接填写GIF的实际高度即可，示例：

  <img src="xxx.gif" width="330" height="305" alt="" style="width: 100%; display: block; max-width: 100%; height: 305px !important;" class="ee_editable" border="0">
  

• 给包裹图片的<td>添加mso-line-height-rule: exactly;属性：Outlook 默认会忽略自定义line-height配置，加上该规则可强制你设置的line-height:305px生效，修改后td的style示例：

  <td align="left" class="element-pad element-bord" style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px; font-size: 1px; line-height: 305px; mso-line-height-rule: exactly;">
  

• 给条件注释内的MSO专属表格的两个<td>添加font-size:0;line-height:0;mso-line-height-rule:exactly;样式，避免MSO默认行高溢出产生间隙。

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