Outlook 2010 <li> 样式和 <br> 被忽略答案

【问题标题】：outlook 2010 <li> styles and <br> are ignoredOutlook 2010 <li> 样式和 <br> 被忽略
【发布时间】：2015-07-08 14:14:45
【问题描述】：

在 Outlook 2010 中解析 HTML 时遇到问题。

每个<li> 之间应该有相等的间距

但是，这破坏了带有多行的 <li> —— 使它看起来很奇怪，因为带有多行的 <li> 应该在线是 line-height:1; 所以你可以说它是相同的 <li> 但在 Outlook 2010 中，以下解决了<li> #2 在第一个 <li> 之后紧接着第一个 <li> 没有空格。

如您所见，我正在尝试padding-top:5px; inline 我也尝试过在顶部元素上使用padding-bottom:，我也尝试过<br> 和</br> 和border-bottom:3px solid #fff;，但我无法创建这个休息空间在这些 <li> 之间正确地解决了 Outlook 2010 中的问题。我正要尝试使用白色图像，但不希望有任何建议？

<ul style="line-height: 2;">
  <li style="line-height:1;border-bottom:2px solid #fff;">lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</li>
  <li><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></li>

基本上上面的解析如下：

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 
• lorim impsum ipsum lorim impsum ipsum

它必须是： （在 Outlook、Gmail 和 Web 中都可以）

• lorim impsum ipsum lorim impsum ipsum
  lorim impsum ipsum 

• lorim impsum ipsum lorim impsum ipsum

【问题讨论】：

标签： html outlook html-email

【解决方案1】：

您可以尝试将<br> 替换为<div>&nbsp;</div> 它对我有用。

我还看到，如果您输入 <br></br>，Outllok 可以正常工作，在这种情况下它会呈现 3 行，但它会破坏其他现代电子邮件客户端，它们将呈现 6 行。

【讨论】：

【解决方案2】：

Outlook 会删除 li 标记中的样式，其中之一是填充。使用本指南了解有关不同电子邮件客户端接受的 CSS 的更多信息 - https://www.campaignmonitor.com/css/

替代方法是使用带有 tds 的表，在左侧 td 中使用 &bull;，在右侧使用副本，如下所示：

<table>
<tr>
  <td style="line-height:1;border-bottom:2px solid #fff;">&bull;</td>
<td>lorim impsum ipsum lorim impsum ipsum<br>
    lorim impsum ipsum
</td>
</tr>
<tr>
  <td>&bull;</td>
<td><span style="padding-top:5px;display:block;">lorim impsum ipsumlorim impsum ipsum</span></td>
</tr>
</table>

【讨论】：

【解决方案3】：

我已经放弃在我的电子邮件中使用<li> 作为项目符号列表。 MS Outlook 有太多挑剔的问题。这是我发现效果最好的方法。

我使用 CSS 标签将左边距向右推一点（在本例中为 20px），然后使用“text-indent”将第一行拉回（在本例中为 -15px）

我还为项目符号使用数字字符参考 ID (&#8226;)

p.bullet {
    margin: 10px 0px 20px 20px;
    text-indent: -15px;
}

<p class="bullet">&#8226;&ensp;List item 1.</p>
<p class="bullet">&#8226;&ensp;List item 2.</p>

我在 MS Outlook 或其他移动电子邮件应用程序中正确呈现它没有任何问题。

【讨论】：

【解决方案4】：

这就是我修复它的方法。我在标题中添加了预样式。

pre {
        white-space: pre-line !important;
        font-family: your-font !important;
    }
<pre>Your text. \n Your second line text.</pre>

【讨论】：