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及以上所需的高度，以这些字体大小呈现完整的可能文本字符集（即使项目符号本身不使用大部分可用高度）。数字因使用的字体系列而异。

Arial字体

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属性。

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

2 个答案: