CKEditor React嵌套列表在Outlook中丢失间距的解决问询

针对Outlook的Word渲染引擎对CSS列表样式支持有限的情况，你可以尝试以下几种有效方案：

• 用<p>标签包裹列表项内容并添加内联样式
  Outlook对<p>标签的margin属性支持比<li>更可靠，将每个列表项的内容放在<p>里，并设置上下margin：

  <ul>
    <li>
      <p style="margin: 10px 0;">父级列表项内容</p>
      <ul>
        <li>
          <p style="margin: 10px 0;">嵌套列表项1</p>
        </li>
        <li>
          <p style="margin: 10px 0;">嵌套列表项2</p>
        </li>
      </ul>
    </li>
  </ul>
  

• 添加Outlook专属条件注释样式
  Outlook仅识别放在条件注释内的特定样式，使用简单选择器设置列表间距，配合!important强制生效：

  <!--[if mso]>
  <style type="text/css">
    ul li { margin-bottom: 10px !important; }
    ul li ul li { margin-bottom: 10px !important; }
  </style>
  <![endif]-->
  

  将这段代码放在邮件HTML的<head>区域，专门针对Outlook生效，不会影响Gmail等其他客户端。

• 调整CKEditor输出规则（可选）
  如果你不想手动修改HTML，可以配置CKEditor，让编辑器自动在每个<li>内部生成带样式的<p>标签。比如在CKEditor的配置中添加：

  ClassicEditor
    .create(document.querySelector('#editor'), {
      enterMode: 'p',
      shiftEnterMode: 'br',
      // 强制列表项内容包裹在p标签中
      list: {
        properties: {
          styles: false,
          startIndex: false,
          reversed: false
        }
      },
      // 自定义p标签的默认样式
      stylesSet: [
        { name: 'List Paragraph', element: 'p', styles: { 'margin': '10px 0' } }
      ]
    })
  

这些方案利用了Outlook对基础HTML标签和条件注释的支持，能有效解决嵌套列表间距消失的问题，同时保持在Gmail中的正常显示。

内容的提问来源于stack exchange，提问作者Rajat Kumar Jain