Numbered Lists not working using PHP, CKEditor and Outlook

问题

When i write a text using CKEditor in my application and format it as a numbered list it is displayed correct like

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

and the html behind is

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

but when I send this text in an email outlook ( my current Version is 2016) is not showing the numbers and the text of the numbered list items get formatted in a smaller font size then the other text as shown in the image below.

When i check the code behind with "show source" it shows up like this

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

Does Outlook maybe not understand the tag or have you got any oder suggestion for me what could be the problem in this case?

I appreciate any help!

回答1:

Here's a JS fiddle: http://jsfiddle.net/GHC7m/81/

Outlook does not understand OL / UL tags, and also will add extra padding to P tags. In order to format the text you have, I've turned those into div tags. These need to be included around any text, including text within a TD. Outlook also has some oddities around padding / margin vs how other email rendering clients handle those properties if I recall correctly, but you should search out more info on that on SO.

Don't ever try to apply padding or margins to your TD or TR tags, it will mess up your table. You should also add your font-family, font-size, and line-height on all of your divs.

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

来源：https://stackoverflow.com/questions/44797859/numbered-lists-not-working-using-php-ckeditor-and-outlook

标签

php

html

outlook

format

ckeditor