编号列表无法使用 PHP、CKEditor 和 Outlook

Question

当我在我的应用程序中使用 CKEditor 编写文本并将其格式化为编号列表时，它会正确显示

Answers to your questions:
  1. First Answer
  2. Second Answer

而后面的html是

<p><span style="color:#1f497d">Answers to your questions:</span></p>

<ol>
    <li><span style="color:#1f497d">First Answer</span></li>
    <li><span style="color:#1f497d">Second Answer</span></li>
</ol>

但是当我在电子邮件 Outlook 中发送此文本时（我的当前版本是 2016 年）没有显示数字，编号列表项的文本被格式化为比其他文本更小的字体，如下图所示.

当我用“显示源代码”检查后面的代码时，它会像这样显示

<p style="margin: 0;padding: 0;font-size: 100%;vertical-align: bottom;font-family: Arial, Verdana, sans-serif;line-height:1.2"><span style="color:#1f497d">Answers to your questions</span></p>

<ol style="margin-right:0px;margin: 0;padding: 0;font-size: 100%;vertical-align: bottom;font-family: Arial, Verdana, sans-serif;line-height:1.2">
    <li style="margin: 0;padding: 0;font-family: Arial, Verdana, sans-serif;line-height:1.4;vertical-align:middle;font-size:12px"><span style="color:#1f497d">First Answer</span></li>
    <li style="margin: 0;padding: 0;font-family: Arial, Verdana, sans-serif;line-height:1.4;vertical-align:middle;font-size:12px"><span style="color:#1f497d">Second Answer</span></li>
</ol>

Outlook 是否可能不理解该标签，或者您对我有什么其他建议吗？在这种情况下可能是什么问题？

感谢您的帮助！

Answer 1

这是一个 JS 小提琴： http://jsfiddle.net/GHC7m/81/

Outlook 不理解 OL/UL 标签，也会给 P 标签添加额外的填充。为了格式化你拥有的文本，我把它们变成了 div 标签。这些需要包含在任何文本周围，包括 TD 中的文本。如果我没记错的话，Outlook 也有一些关于填充/边距与其他电子邮件呈现客户端如何处理这些属性的奇怪之处，但您应该在 SO 上搜索更多信息。

永远不要尝试对您的 TD 或 TR 标签应用填充或边距，这会弄乱您的表格。您还应该在所有 div 上添加字体系列、字体大小和行高。

    <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d">Answers to your questions:</div>
    <table cellspacing="0" cellpadding="0">
        <tr><td width="30" align="center" valign="top">
                <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;text-align:center;">1.</div>
            </td>
            <td width="200" align="left" valign="top">
                <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;">
                    First answer 
                </div>
             </td>
        </tr>
        <tr><td width="30" align="center" valign="top">
                <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d;text-align: center;">2.</div>
            </td>
            <td width="200" align="left" valign="top">
                <div style="font-family: Times, georgia, serif; font-size: 13px; line-height: 17px;color:#1f497d">
                    Second answer
                  </div>
            </td>
        </tr>
    </table>