如何消除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




