在 Outlook 2010 中删除表格单元格间距

Question

希望在 HTML 电子邮件中使用表格模拟项目符号列表。下面的代码适用于除 Outlook 2010 和 2013 之外的所有客户端。

我们使用 line-height 和其他 CSS 来删除所有单元格间距。但是，在 Outlook 2010 中，行高声明将被忽略，并显示默认（增加的）间距。

有谁知道是否有任何 CSS 解决方案可以让 Outlook 尊重行高？

<table style="border-collapse:collapse; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px; padding-top: 0px;" border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-bottom: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; padding-bottom: 0px; margin: 0px; line-height: 18px;">A</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">B</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; margin: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">C</td>
                            </tr>
                        </tbody>
                    </table>

Answer 1

解决方案

一般而言，这不是自定义列表中项目符号大小的合理方法，因为在 Outlook 2007 及更高版本中存在副作用（如下所述）。但是，在这种特殊情况下，使用 Arial 而不是 Trebuchet MS 作为项目符号字符可能是一个合适的解决方案。

<table style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">A</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">B</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; margin: 0px; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">C</td>
        </tr>
    </tbody>
</table>

说明

将font-size:16px 用于项目符号字符会强制Outlook 2007 及更高版本以至少22px 的高度呈现每一行，无论指定的line-height 是什么。当我将子弹的font-size 减小到 13px 时，线条被渲染为 18px 的高度。如果font-size增加到20px，渲染的行高就是26px。

这似乎是 Outlook 2007 及更高版本需要多少高度才能以这些字体大小呈现所有可能的文本字符（即使项目符号字符本身不使用大部分可用高度）。数字因使用的字体系列而异。

宋体

font-size    minimum line-height     difference
   10               13                  +3
   11               14                  +3
   12               15                  +3
   16               18                  +2
   20               23                  +3
   30               35                  +5
   60               67                  +7

Trebuchet MS

font-size    minimum line-height    difference
   10               15                  +5
   11               16                  +5
   12               18                  +6
   16               22                  +6
   20               26                  +6
   30               38                  +8
   60               76                  +16

相关信息

对于 HTML 表格，使用 HTML 属性而不是 CSS 样式指定宽度和高度。现代版本的 Outlook 忽略 width 和 height 样式。

在某些情况下，向表格单元格添加 line-height 样式（可能还有 HTML height 属性）将有助于强制实现所需的行高。

Partial list of features not supported by Outlook.

Answer 2

您无法让line-height 在 Outlook 中工作。但是，您可以做的是在各个列中打破您的表格，这意味着在span 中不需要有•。而不是创建一个将保存• 的td。您可以使用表格属性v-align:top/middle/bottom; 来正确排列列表项。这样就不需要使用line-height 属性。