Outlook 通过电子邮件发送 TD 单元格中的额外空间答案

【问题标题】：Outlook emails extra space in TD cellsOutlook 通过电子邮件发送 TD 单元格中的额外空间
【发布时间】：2021-06-28 19:21:51
【问题描述】：

Outlook 使所有内容都变得更高，文本也变成了 4 行。我希望测试也一样。

看图片，右边，除了字体大小和行距外，其他都大了。

我尝试将行高设置为 0，然后设置为 1。它没有任何区别。谢谢！

 <tr>
    <td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:20px;font-size:20px" height="20px" valign="top" bgcolor="red">&nbsp;</td>
 </tr>

 <tr>
    <td valign="top" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;" bgcolor="blue">
       <div class="mktoText" id="" mktoName="" style="line-height: 30px;font-weight: 400; color: #ffffff; font-size:19px;letter-spacing: 0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis.
       </div>
    </td>
 </tr>

【问题讨论】：

Microsoft 不再支持 Outlook 2007。你确定要让自己承受这种痛苦吗？
我应该编辑，它发生在我运行的所有 Microsoft 电子邮件测试中
您将哪些电子邮件客户端与 Outlook 进行比较？当我将 Outlook 2016 与 Litmus 中的 Apple Mail 进行比较时，考虑到它是 Outlook，我会接受可以忽略不计的差异。老实说，我会说你永远不会得到完美对齐的东西。请记住，每个电子邮件客户端都有自己的渲染引擎，甚至在操作系统之间也有所不同（例如 Gmail iOS 与 Gmail Android），所以不要指望所有东西都能在任何地方准确地镜像。
基本上都是 Mac 和 Microsoft。这些差异加起来，我尽量减少它们。如果没有，我会解决它。

标签： html html-table outlook html-email outlook-2007

【解决方案1】：

可能只是表格在 Outlook 中的宽度小于您的其他应用程序。指定例如<table width="300">，正如@Digital_Frankenstein 所说，差异可以忽略不计。

我确实注意到，当使用line-height:60px 或任何像素值时，Outlook 会将文本呈现在行的底部：

但是当只使用没有数字的数字时，例如line-height:3，Outlook 将文本呈现在行首！（与百分比相同，例如 300%。）

（在 Outlooks 中使用“em”似乎明显不同 - 更小，并在底部呈现。）

您可能需要为 div 指定一个边距以使它们一致地排列（通常，由于行高通常非常小，因此难以察觉）。

但也要考虑到，在查看您的电子邮件时，没有人会将 Outlook 与 Gmail/Apple Mail 等进行比较。因此，您的目标不是像素完美，而是一致的体验，适应每个电子邮件环境（移动、桌面、内部/外部、iOS/Android 等）

空白行

我一直在空白行上使用一个段落，以在跨电子邮件环境中获得相同的高度：

<td bgcolor="red"><p style="font-size:20px;line-height: 20px;">&nbsp;</p></td>

【讨论】：