Outlook Windows 无法正确呈现 <tr> 高度，它应该具有与其他电子邮件提供商相同的第一列高度

Outlook Windows not rendering correctly <tr> height, it should have the same height of the first column like in other email providers

提问人：Pedrito 提问时间：8/23/2023 最后编辑：Chris BarrPedrito 更新时间：8/24/2023 访问量：40

问：

Outlook rendering image here

正确的呈现和代码

<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:auto;width:264px;border:none;">
 <tr style="width:264px;height:125px">
  <td style="width:125px;height:125px">
   <div style="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"/>
   </div>
  </td>
 <td style="background-color:red;width:139px;height:125px;padding:0px 10px 0px 10px;border:0px solid transparent;border-top-right-radius:10px;border-bottom-right-radius:10px">
  <p style="font-family:Helvetica;font-size:12px;line-height:14px;margin-bottom:-7px">Small title</p>
  <p style="font-family:Helvetica;font-size:12px;line-height:14px;padding:0px">
   <a href="https://stackoverflow.com/" style="font-weight:700;text-decoration:none;color:#1C3775;">OUTLOOK <br/> WINDOWS <br/> SUCKS </a></p>
 </td>
</tr>
</table>

我几乎尝试了所有方法，这与文本的长度无关，也不取决于填充。 我还试图删除包含图像的内容，因为 outlook 不喜欢 divs<br><div>

CSS 电子邮件 HTML 表格 Outlook MJML

评论

2赞 Stu 8/23/2023
outlook HTML 渲染仍然基于古老的 IE 渲染引擎。
0赞 A Haworth 8/24/2023
您是否尝试过在第一个 td 中设置 font-size： 0？

答：

1赞 Jewwy 8/24/2023 #1

默认情况下，图像是内联元素。所以我在想，也许它会在图像下方为字母的后代留出空间，比如 g、j、p、q。

您可能想尝试以下 2 件事：

  1. 将图像设置为使用您正在使用的内嵌样式。display:block
  2. 将 a 添加到图像的内联样式中。vertical-align:bottom

我不确定两者是否都可以在 Outlook 中使用，但值得一试。

评论

0赞 Pedrito 8/24/2023
不幸的是，它不起作用，但非常感谢您的答案！

上一个：HTML CSS 电子邮件网格未正确显示

下一个：如何删除 shopify 订单确认电子邮件中的此空白区域？