Outlook 2010 <li> 样式并<br>被忽略

Question

Outlook 2010中HTML解析出现问题。

每个<li>之间应该有一个相等的空间，我已经成功地做到了这一点，使用了内联的UL样式，正如你可以看到下面的line-height:2;。

然而，这打乱了具有多行的<li> -使其看起来很奇怪，因为具有多行的<li>应该在线为line-height:1;，因此您可以告诉它是相同的<li>，但在Outlook 2010中，下面的<li> #2在第一个<li>之后立即低于第一个<li> ，没有空格。

正如你所看到的，我正在尝试padding-top:5px;内联，我也尝试了padding-bottom:上的顶部元素，我也尝试了<br>和</br>和边界- 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

Answer 1

您可以尝试用<div>&nbsp;</div>代替<br>，它对我有效。

我也看到outlook工作正常，如果你把<br></br>在这种情况下，它呈现3行，但它打破了其他现代电子邮件客户端，他们将呈现6行。

Answer 2

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

另一种选择是使用带有tds的表，在左侧td中使用•，在右侧使用copy，如下所示:

<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>

Answer 3

我已经放弃在我的电子邮件中使用<li>作为项目列表。MS Outlook的问题太多了。以下是我发现的最有效的方法。

我使用一个CSS标签将左距向右推一点(在本例中为20px)，然后使用"text-indent"将第一行向后拉(在本例中为-15px)

我还使用数字字符引用ID作为项目符号(•)

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或其他移动电子邮件应用程序中正确渲染它没有任何问题。

Answer 4

这就是我如何修复它。我已经在标题中添加了预样式。

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