Outlook中display:none表现不一致但Chrome中正常的问题咨询

问题原因 #

• Windows桌面版Outlook采用Microsoft Word作为HTML渲染内核，对<td>元素的display: none规则适配存在已知bug。当行内存在设置了colspan的跨列单元格时，内核会优先按照你设定的列宽占比（25% + 跨列占50% +25%）计算表格布局，为了补全列宽会强制渲染第一个<td>元素，因此只有右侧的<td>隐藏规则生效。
• 你给<td>同时设置了width属性，Word渲染内核会优先识别原生属性分配列空间，进一步覆盖了display: none的样式优先级。

可行解决方案 #

• 方案1：给需要隐藏的<td>补充Outlook专用隐藏样式，完整样式如下：

  style="display: none; mso-hide: all; width: 0 !important; height: 0 !important; overflow: hidden; padding: 0 !important; margin: 0 !important; border: none !important;"
  

  同时给<td>内的img元素也加上相同的隐藏规则，避免内容撑开单元格。
• 方案2：如果无需保留这两个占位单元格，直接删除左右两个<td>，将中间显示Hello World的<td>的colspan属性改为1即可，从根源规避列宽计算bug。
• 方案3：如果必须保留这两个单元格的代码，用Outlook条件注释完整包裹要隐藏的两个<td>：

  <!--[if mso]><div style="display:none;mso-hide:all;"><![endif]-->
  <!-- 这里放你要隐藏的两个td代码 -->
  <!--[if mso]></div><![endif]-->
  

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