时间戳

首页 > 解决方案 > 如何在适用于 Outlook 和 Gmail 电子邮件的模板中设置左侧填充？

css - 如何在适用于 Outlook 和 Gmail 电子邮件的模板中设置左侧填充？

问题描述

我在列表元素的代码中设置了 15 像素的左侧填充，显示的填充在两个平台中看起来不一样。

<ul style="padding-left: 10px !important; margin: 0 !important;">
    <li
       style="text-align: left !important; font-size: 14px; font-family: bold, sans-serif, sans-serif !important;">
       <span
          style="color: #055151; line-height: 150%; font-family: bold, sans-serif;">List element</span>
    </li>
 </ul>

如何做到这一点？

标签： cssemailhtml-email

解决方案

Windows 上的 Outlook使用 Word 作为 HTML 和 CSS 的呈现引擎。我在这里看到两件可能有问题的事情：

  • !important不支持内联样式。
  • Word 用于text-indent实际定位列表项标记。为了避免影响其他电子邮件客户端，我们可以使用mso-text-indent-alt将专门应用于Outlook的 Word 渲染引擎。

这是一个应该与您想要实现的目标相匹配的示例代码：

<ul style="padding:0; margin:0 0 0 10px;">
    <li style="mso-text-indent-alt:-0.75em; text-align:left; font:bold 14px sans-serif;">
        <span style="color:#055151; line-height:150%;">List element</span>
    </li>
</ul>

这里是Acid 上的电子邮件测试截图。

推荐阅读