编号列表无法使用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）没有显示数字，编号列表项的文本格式化为较小的字体大小，而其他文本如下图所示。

当我用“show source”检查后面的代码时，它会显示如下

<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上添加font-family，font-size和line-height。

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