You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何消除Outlook中HTML邮件模板<li>标签默认大间距?

解决Outlook中HTML邮件无序列表间距过大的问题

我太懂Outlook邮件排版的糟心坑了!这种原生列表间距失控的情况几乎是每个邮件开发者都踩过的雷,结合你已经尝试的方法,给你几个亲测有效的解决方案:


1. 用Outlook专属条件注释精准控样式

Outlook用Word的渲染引擎,对CSS的支持和普通浏览器天差地别,我们可以用条件注释给Outlook单独喂样式:

<!--[if mso]>
<style>
ul, li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    mso-line-height-rule: exactly;
}
</style>
<![endif]-->

这个注释只有Outlook会识别,直接强制清零列表的边距,同时用mso-line-height-rule: exactly让Outlook严格按照你设置的行高渲染,避免它自作主张加额外间距。

2. 放弃原生列表,用表格模拟(最稳妥方案)

原生列表在Outlook里的表现太不可控,很多专业邮件模板都会直接用表格来模拟列表,完全掌控间距:

<table width="100%" cellpadding="0" cellspacing="0" border="0">
    <!-- 列表项1 -->
    <tr>
        <td width="20" valign="top" style="padding: 3px 0; font-size:16px;">•</td>
        <td valign="top" style="padding: 3px 0; font-family: Georgia, serif, 'Cormorant'; font-size: 16px; line-height: 22px; letter-spacing: .02em; color: #111111; font-weight: 300; font-style: italic;">
            你的列表项内容1
        </td>
    </tr>
    <!-- 列表项2 -->
    <tr>
        <td width="20" valign="top" style="padding: 3px 0; font-size:16px;">•</td>
        <td valign="top" style="padding: 3px 0; font-family: Georgia, serif, 'Cormorant'; font-size: 16px; line-height: 22px; letter-spacing: .02em; color: #111111; font-weight: 300; font-style: italic;">
            你的列表项内容2
        </td>
    </tr>
</table>

通过给<td>设置padding:3px 0就能精准控制上下间距,所有邮件客户端(包括Outlook)的显示效果都能完全一致。

3. 给原生li加内联样式+MSO属性

如果一定要保留原生ul/li结构,除了你尝试的大写Margin,还要给每个li加内联样式并强制行高规则:

<ul style="margin:0; padding:0;">
    <li style="margin:0 !important; padding:3px 0 !important; line-height:22px; mso-line-height-rule:exactly;">
        <span style="font-family: Georgia, serif, 'Cormorant'; font-size: 16px; letter-spacing: .02em; color: #111111; font-weight: 300; font-style: italic;">
            列表项内容
        </span>
    </li>
</ul>

mso-line-height-rule:exactly是核心,它会让Outlook忽略默认的行高计算逻辑,严格按照你设置的数值渲染,杜绝额外间距。


最后提醒下:测试一定要用Outlook桌面客户端(比如2016/2019/365),网页版Outlook的渲染逻辑和桌面版不一样,不能作为最终参考。

内容的提问来源于stack exchange,提问作者DumbDevGirl42069

火山引擎 最新活动