时间戳

首页 > 解决方案 > Outlook 通过电子邮件发送 TD 单元格中的额外空间

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

问题描述

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>

间距

标签： htmlhtml-tableoutlookhtml-emailoutlook-2007

解决方案

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

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

Outlook 呈现在行的底部

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

Outlook 呈现在行首

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

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

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

空行

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

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

推荐阅读