HTML UL中针对XHTML电子邮件模板缺少项目符号

时间:2014-07-18 22:16:30

标签: html css xhtml html-lists html-email

我正在为销售电子邮件构建功能表。当我在浏览器中测试时,表格的html呈现没有问题,但当我将其添加到我们的内部CRM时,它成为xhtml电子邮件模板的一部分。问题是UL列表中的项目符号点不会显示在列表中的第一项之后。

以下是代码在xhtml模板中的外观示例:

<td style="text-align:left;width:330px;min-height:50px;
   border-right:1px solid #cfd0d2;border-bottom:1px solid #cfd0d2;
   background-color: #ffffff;border-left:1px solid #cfd0d2;padding: 3px 5px;
   border-collapse: collapse;">

  <p style="font-family:'Arial', 'Helvetica', 'Verdana'; font-size:13px;
     color:#333333;">
     Next Generation Remote Access service that manages your appointments
     and business on the go, which includes:</p>

  <ol>

    <li>

      <p>Free Android &amp; iOS apps</p>

      <p>25+ Business Reports</p>

      <p>Mobile Credit Card Processing Available</p>

      <p>Book Appointments</p>

      <p>Add &amp; Edit Clients and Pets</p>

      <p>View Grooming Notes &amp; Client History</p>

      <p>And More...</p>

    </li>

  </ol>

</td>

这是我的原始代码:

<td style="text-align:left;width:330px;min-height:50px;
    border-right:1px solid #cfd0d2;border-bottom:1px solid #cfd0d2;
    background-color: #ffffff;border-left:1px solid #cfd0d2;padding: 3px 5px;
    border-collapse: collapse;">

    <p style="font-family:'Arial', 'Helvetica', 'Verdana'; font-size:13px;
       color:#333333;">Next Generation Remote Access service that manages
       your appointments and business on the go, which includes:</p>
    <ol>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Free Android & iOS apps</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           25+ Business Reports</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Mobile Credit Card Processing Available</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Book Appointments</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Add & Edit Clients and Pets</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           View Grooming Notes & Client History</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           And More...</li>
    </ol>
</td>

1 个答案:

答案 0 :(得分:0)

如果您使用<ol>(有序列表) 您将能够在<li> element </li>

中查看每个孩子<ol> </ol>的基数

将您的代码更改为:

<p style="font-family:'Arial', 'Helvetica', 'Verdana'; font-size:13px; color:#333333;">Next Generation Remote Access service that manages your appointments and business on the go, which includes:</p>

        <ol>



            <li>Free Android &amp; iOS apps</li>

            <li>25+ Business Reports</li>

            <li>Mobile Credit Card Processing Available</li>

           <li>Book Appointments</li>

           <li>Add &amp; Edit Clients and Pets</li>

            <li>View Grooming Notes &amp; Client History</li>

            <li>And More...</li>



        </ol>

      </td>

<强>样本

http://jsfiddle.net/7dUJs/

我发现您的语法不正确:

<td style="text-align:left;width:330px;min-height:50px;
    border-right:1px solid #cfd0d2;border-bottom:1px solid #cfd0d2;
    background-color: #ffffff;border-left:1px solid #cfd0d2;padding: 3px 5px;
    border-collapse: collapse;">

    <p style="font-family:'Arial', 'Helvetica', 'Verdana'; font-size:13px;
       color:#333333;">Next Generation Remote Access service that manages
       your appointments and business on the go, which includes:</p>
    <ol>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Free Android & iOS apps</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           25+ Business Reports</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Mobile Credit Card Processing Available</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Book Appointments</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           Add & Edit Clients and Pets</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           View Grooming Notes & Client History</li>
       <li style="FONT-SIZE: 13px; FONT-FAMILY: 'Arial', 'Helvetica', 'Verdana'">
           And More...</li>
    </ol>
</td>

用这个替换它:

<p style="font-family: Arial, Helvetica, Verdana, sans-serif; font-size:13px;
   color:#333333;">Next Generation Remote Access service that manages
   your appointments and business on the go, which includes:</p>
<ol>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana;">
       Free Android & iOS apps</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       25+ Business Reports</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       Mobile Credit Card Processing Available</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       Book Appointments</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       Add & Edit Clients and Pets</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       View Grooming Notes & Client History</li>
   <li style="font-size: 13px; font-family: Arial, Helvetica, Verdana, sans-serif;">
       And More...</li>
</ol>

一个原因可能是您的CMS在CSS内联样式中的Verdana之后缺少分号。我改变了小写的属性,就像他们应该的那样,我也删除了那些Web安全字体的引号以防万一,并添加了一个无衬线后备。如果有效,请告诉我。 :)