0

首先，这是针对email的，所以我不能把css放在head里，只能放在table、td、ul等。

我将粘贴我的代码片段和它在 IE、Firefox 和 MS Outlook 中的样子的屏幕截图。

            <html>
             <head>
             </head>
             <body>
              <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
                 <tr bgcolor=#FF8100 valign="top">
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
                 </tr>
                 <tr bgcolor=#FFCA99 valign="top">
                   <td>Review
                   </td>
                   <td> 
                     <ul style="margin: 0px 0px 0px 15px;">
                      <li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
                      <li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
                     </ul>
                   </td>
                 </tr>
                </table>
               </body>
              </html>

它在 IE 中看起来很棒，但在 Firefox 中有很大的余量，而在 Outlook 中，只有一小部分项目符号显示出来。

IE：

浏览器视图

火狐：

FF 视图

外表：

展望视图

我必须假设观众可能会使用所有这些选项来查看这封电子邮件，那么我怎样才能让它看起来普遍呢？我尝试将填充放在 ul 样式中，我尝试制作子弹图像，将其用作 li 背景图像，并且不给 ul 样式......这也不起作用。我尝试的所有内容在 3 次电子邮件视图中至少有 2 次看起来都很糟糕。

我真的很感激帮助！

（Gmail 对 css 的解释是最严格的，所以我必须遵守他们的规则。这些可以在这里找到 -> http://www.campaignmonitor.com/css/ 你可以看到 Android 上的 Gmail 不允许list-style-x，所以我不能使用它们。我只能使用带有所有绿色复选标记的那些。）

谢谢！-冬青

4

3 回答 3

1

将填充放在 td 上，而不是 ul，您可能还需要重置 ul 和 li 元素的样式

<html>
         <head>
         </head>
         <body>
          <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
             <tr bgcolor=#FF8100 valign="top">
               <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
               <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
             </tr>
             <tr bgcolor=#FFCA99 valign="top">
               <td>Review
               </td>
               <td style="padding-left:15px;"> 
                 <ul style="padding:0px;margin:0;">
                  <li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
                  <li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
                 </ul>
               </td>
             </tr>
            </table>
           </body>
      </html>
于 2012-12-14T21:29:39.183 回答
1

只需重置 ul 和 li 上的填充/边距就可以了！谢谢@keeg！

使用此代码：

      <html>
     <head>
     </head>
     <body>
      <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
         <tr bgcolor=#FF8100 valign="top">
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
         </tr>
         <tr bgcolor=#FFCA99 valign="top">
           <td>Review
           </td>
           <td style="padding-left:25px;"> 
             <ul style="padding:0px;margin:0;">
              <li style="padding:0px;margin:0;">Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
              <li style="padding:0px;margin:0;">Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
             </ul>
           </td>
         </tr>
        </table>
       </body>
   </html>

它在 IE、Firefox 和 Outlook 中看起来像这样（按从上到下的顺序），由于 Outlook 的看法，这并不完美，但更容易接受：

带复位

于 2012-12-17T19:19:47.340 回答
0

并非所有电子邮件客户端都支持填充。为确保列表项之间的间距正确，请勿将其设为列表。对不起。

<tr>
<td width="10">&bull;</td><td width="5" style="font-size:1px;">&nbsp;</td><td... content</td>
</tr>
<tr>
<td width="10" height="5" style="font-size:1px; line-height:1px;">&nbsp;</td> etc...

空的 TD 不会在 IE 中显示，没有字体大小的 TD 在 IE 中呈现为默认（比如 12 像素）大小，还有很多很多类似的东西。在空表格单元格上声明一个具有高度和字体大小和行高样式的空行可修复项目之间的空间。

于 2013-03-15T13:43:34.643 回答