Outlook Windows中<tr>高度渲染异常，需与首列高度匹配

针对Windows版Outlook中表格<tr>高度无法和第一列保持一致的问题，以下是适配Outlook渲染特性的修复方案：

核心问题根源 #

Windows版Outlook依赖Word的渲染引擎，对CSS height 属性支持有限——当单元格内文本内容的实际高度超过设置值时，会自动撑开单元格，直接忽略行高限制。

具体修复方法 #

1. 切换表格布局为固定模式 #

将外层表格的table-layout从auto改为fixed，强制列宽严格按照设置值渲染，避免内容撑开列宽进而影响行高：

table-layout: fixed;

2. 移除<p>标签，改用纯文本+<br>控制换行 #

Outlook对<p>标签的margin/padding解析存在异常，会额外增加垂直间距导致单元格高度被撑开，直接用文本+<br>替换即可规避。

3. 给右侧单元格添加固定高度容器 #

用嵌套的相对+绝对定位div做固定高度容器，确保文本内容在容器内显示，不会突破高度限制；同时给左侧图片添加display:block，消除Outlook默认给图片添加的底部空白。

修改后的完整代码 #

<table cellpadding="0" cellspacing="0" width="264" border="0" style="color:#142752;font-family:Helvetica, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, sans-serif;font-size:12px;line-height:133%;table-layout:fixed;width:264px;border:none;">
 <tr style="width:264px;height:125px;">
  <td style="width:125px;height:125px;overflow:hidden;">
    <img src="https://img3.oastatic.com/img2/49260499/max/whatsapp-image-2020-05-07-at-17.jpg" style="height:125px;width:125px;display:block;" />
  </td>
  <td style="background-color:red;width:139px;height:125px;padding:0 10px;border:0 solid transparent;border-top-right-radius:10px;border-bottom-right-radius:10px;vertical-align:top;">
    <div style="height:125px;position:relative;">
      <div style="position:absolute;top:0;left:0;right:0;">
        Small title<br>
        <a href="https://stackoverflow.com/" target="_blank" style="font-weight:700;text-decoration:none;color:#1C3775;">OUTLOOK <br> WINDOWS <br> SUCKS </a>
      </div>
    </div>
  </td>
</tr>
</table>

注意事项 #

所有样式均采用内联写法——邮件客户端普遍不支持外部CSS或内部<style>标签，Outlook部分版本甚至完全不识别非内联样式。

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