Question

在Outlook 2010中解决HTML问题。

每个<li>之间应该有一个相等的空格我已经成功地使用了内联的UL样式，如下面line-height:2;所示。

然而，这会导致多行<li>中断 - 使其看起来很奇怪，因为多行的<li>应该在线line-height:1;，所以你可以告诉它{{1}但是在Outlook 2010中，在第一个<li>紧跟第一个<li> 之后没有空格之后，下面的<li>＃2会解析。

正如您所看到的，我正在尝试<li>内联我在顶部元素上尝试了padding-top:5px;，我也尝试了padding-bottom:和<br>以及border - {{ 1}}我无法在这些</br>之间正确地创建这个中断空间在Outlook 2010中没有解决。我将尝试白色图像，但不愿意，有任何建议吗？

bottom:3px solid #fff;

基本上上面解决方案如下：

<li>

，它必须是： （在Outlook，Gmail和网络中没关系）

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

Answer 1

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

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

Answer 2

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

替代方法是使用带有tds的表格，使用左侧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 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或其他移动电子邮件应用程序中正确呈现它没有问题。

outlook 2010 <li>样式和被忽略

3 个答案: