在 MicroSoft Outlook 中打开时，CKEditor 在内容中嵌套列表后不允许有空格

Question

大家好，我正在使用 CKEditor (react) 来编辑和创建要通过发送网格邮寄的内容。内容举例是这样的：

<ul><li><strong>Netflix plans to raise prices of ad-free tier following Actor’s Strike </strong>

（链接）

Answer 1

Outlook 在列表上应用间距的方式有点奇怪。在单个级别上（因此，不是嵌套的），第一个

<li>

的 margin-top 控制列表上方的间距，最后一个

<li>

的 margin-bottom 控制列表下方的间距。 IE。 不是

<ul>

或

<ol>

上的边距。

对于嵌套列表，在我刚才的测试中，是一样的。我测试了这个并且它有效：

<ul>
    <li>And things here
        <ul>
            <li>one</li>
            <li>two</li>
            <li style="margin-bottom:50px;">three</li>
        </ul>
    </li>
    <li>And another story here
        <ul>
            <li>second list</li>
            <li>second two</li>
            <li>second three</li>
        </ul>
    </li>
</ul>

或者，由于 Outlook 不接受像

:last-child

(https://www.caniemail.com/features/css-pseudo-class-last-child/) 这样的花哨 CSS，您可以尝试向最后一个列表项并向其添加 margin-bottom ？

但是为了在电子邮件客户端之间保持一致，您可能会发现有一个空白段落更容易——您只需稍稍有所不同即可：

<p style="font-size:0;line-height:0;margin:50px 0 0 0;">&nbsp;</p>

有时，是编辑器本身删除了它认为的空白区域。在这种情况下，上面的方法仍然可以工作，或者，您可以尝试使用一些奇特的字符，例如

‌

（零宽度非连接符），这些字符通常不会被删除。