Outlook HTML电子邮件中的项目符号列表样式

时间:2014-05-07 16:12:29

标签: html css email outlook html-email

我在Outlook电子邮件中遇到了一个非常独特的问题。根据所有建议,我将我的html列表转换为表格,类似于以下代码:

<table border="0" cellspacing="0" cellpadding="0">
    <tbody>
        <tr style="font-size:13px;font-family:'Courier New',Courier,monospace;">
            <td valign="top" style="padding-right:3px;padding-left: 40px;">•</td>
            <td valign="top">Sample Text</td>
        </tr>
        <tr style="font-size:13px;font-family:'Courier New',Courier,monospace;">
            <td valign="top" style="padding-right:3px;padding-left: 40px;">•</td>
            <td valign="top">Sample Text #2</td>
        </tr>
    </tbody>
</table>

这在Web浏览器中正确显示,但在任何版本的Outlook中,在第一个项目符号之前会添加额外的空间。经过一些分析后,我发现Outlook html看起来像这样:

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 style='mso-cellspacing:0in;mso-yfti-tbllook:1184;mso-padding-alt:0in 0in 0in 0in'>
    <tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes'>
        <td valign=top style='padding:0in 2.25pt 0in 30.0pt'>
            <p class=MsoNormal>
                <span style='mso-fareast-font-family:"Times New Roman"'>
                    <span style='mso-spacerun:yes'> </span>
                </span>
                <span style='font-size:10.0pt; font-family:"Courier New";mso-fareast-font-family:"Times New Roman"'>•<o:p></o:p></span>
            </p>
        </td>
        <td valign=top style='padding:0in 0in 0in 0in'>
            <p class=MsoNormal>
                <span style='font-size:10.0pt;font-family:"Courier New"; mso-fareast-font-family:"Times New Roman"'>Sample Text<o:p></o:p></span>
            </p>
        </td>
    </tr>
...

你会在子弹的左边看到这个标签:

<span style='mso-spacerun:yes'> </span>

Outlook似乎正在增加一个空间。有人知道为什么吗?反正我有没有阻止这个或忽略这个标签?

注意:这仅在某些情况下发生,并非在每种情况下都发生,并且始终仅在第一颗子弹上发生。这种情况之间没有区别,也没有发生。

非常感谢任何帮助!

2 个答案:

答案 0 :(得分:1)

我能想到解决这个问题的一种方法是根据它的属性选择范围并将其设置为零大小。这样,只有当这个标签出现时,它才会被设置样式

span[style|=mso-spacerun]
  {
    height: 0;
    width: 0;
  } 

让我知道这是否有效。

答案 1 :(得分:0)

感谢大家的帮助。 Outlook实际上是将一个块元素作为一个内联元素:

<pre>
    ...
    <table>...</table>
    ...
</pre>

我认为outlook不喜欢内联元素中的块元素。