编号列表不能使用PHP，CKEditor和Outlook [英] Numbered Lists not working using PHP, CKEditor and Outlook

问题描述

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

 你的问题：
 1.第一个答案
 2.第二个答案
  

和后面的HTML是

 < p>< span style =color：＃1f497d>您的问题的答案： < /跨度>< / p为H. 
 
 
 
< li>< span style =color：＃1f497d>第一个答案< / span>< / li> 
< li>< span style =color：＃1f497d>第二回答< / span>< / li> 
< / ol> 
  

但是当我在电子邮件展望（我目前的版本是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>您的问题解答< / span> < / p为H. 
 
 
< 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>第一个答案< / 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>第二回答< / span>< / li> 
< / ol> 
  

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

感谢任何帮助！

解决方案

JS小提琴：
http://jsfiddle.net/GHC7m/81/

Outlook不理解OL / UL标签，也会为P标签添加额外的填充。为了格式化你的文本，我把它们转换成了div标签。这些需要包含在任何文本中，包括TD中的文本。 Outlook也有一些奇怪的周围填充/保证金与其他电子邮件渲染客户端如何处理这些属性，如果我记得正确，但你应该搜索更多的信息在这个。

千万不要尝试填充你的TD或TR标签的填充或边距，这会弄乱你的桌子。您还应该在所有div上添加字体系列，字体大小和行高。

$ b

 < div style =font-family：Times，georgia，serif; font-size：13px; line-height：17px; color：＃1f497d>您的问题解答：< / DIV> < table cellspacing =0cellpadding =0> < tr>< td width =30align =centervalign =top> < div style =font-family：Times，georgia，serif; font-size：13px; line-height：17px; color：＃1f497d; text-align：center;> 1.< / div> < / TD> < td width =200align =leftvalign =top> < div style =font-family：Times，georgia，serif; font-size：13px; line-height：17px; color：＃1f497d;>首先回答< / div> < / TD> < / TR> < tr>< td width =30align =centervalign =top> < div style =font-family：Times，georgia，serif; font-size：13px; line-height：17px; color：＃1f497d; text-align：center;> 2.< / div> < / TD> < td width =200align =leftvalign =top> < div style =font-family：Times，georgia，serif; font-size：13px; line-height：17px; color：＃1f497d>第二个答案< / div> < / TD> < / TR> < / table>  

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!

解决方案

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>

这篇关于编号列表不能使用PHP，CKEditor和Outlook的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！