outlook 2010 <li> 样式和 <br> 被忽略

Question

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

每个 <li> 之间应该有相等的 space 我已经成功地使用内联应用的 UL 样式完成了此操作，如下面的 line-height:2; .

然而，这扰乱了多行的 <li> -- 让它看起来很奇怪，因为多行的 <li> 在线应该是 line-height:1; 所以你可以看出它是一样的 <li> 但在 Outlook 2010 中，下面的内容解析为 <li> #2，第一个 <li> 紧接在第一个 <li> 的下方，没有 space。

如您所见，我正在尝试 padding-top:5px; 内联我也尝试了 padding-bottom: 在顶部元素上，我还尝试了 <br> 和 </br> 以及边框- bottom:3px solid #fff; 并且我无法在这些 <li> 之间正确地创建此中断 space 在 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

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

另一种方法是使用带有 tds 的 table，在左侧 td 中使用 •，在右侧使用副本，如下所示：

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

我已经放弃在我的电子邮件中使用 <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 3

您可以尝试将 <br> 替换为 <div> </div> 它适合我。

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

Answer 4

我就是这样解决的。我在 header 中添加了 pre-style。

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

outlook 2010 <li> 样式和 <br> 被忽略

outlook 2010 <li> styles and <br> are ignored

html

outlook

html-email