2

希望在 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>
4

2 回答 2

4

解决方案

一般来说，这不是自定义列表中项目符号大小的合理方法，因为在 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将子弹的大小减小到 13 像素时，线条的高度为 18 像素。如果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

投石机 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样式（可能还有 HTMLheight属性）将有助于强制实现所需的行高。

Outlook 不支持的部分功能列表。

于 2012-08-18T14:30:13.370 回答
0

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

于 2012-08-19T02:22:54.860 回答