Outlook中html电子邮件签名中的表行之间的空格

时间:2015-07-16 09:43:30

标签: html email outlook

我正在构建电子邮件签名并在Android上遇到麻烦。无处不在,但在Android电子邮件客户端中,表行之间有很大的空间。我从MS Outlook 2013发送签名,Outlook添加到代码自己的span:

<span style=3D'font-size:12.0pt;font-family:"Times New =Roman","serif"'> <o:p></o:p></span>

我不知道那是什么,但99%是麻烦的原因。 原始代码如下所示:

           <tr>
                <td width="40px"></td>
                <td width="20">
                    <span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: bold;color: #004e7c;">
                    W
                    </span>
                </td>
                <td width="260px" >
                    <span style="font-family: Arial, sans-serif; font-size: 11px; line-height: 16px; font-weight: regular; font-style: italic; color: #004e7c;">
                        <a href="http://example.com/" style="color: #004e7c;">example.com</a>
                    </span>
                </td>
            </tr>

当我从Mailchimp发送电子邮件时,一切都很好,代码看起来像这样(类表格包含在html中)

<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
    <td width="40px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
    <td width="20px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
        <span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">
            W
        </span>
    </td>
    <td width="260px" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;">
        <span style="font-family: Arial, sans-serif;font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;">
            <a href="http://example.com/" style="color: #004e7c;font-family: Arial, sans-serif;text-decoration: underline;font-size: 11px;">example.com</a>
        </span>
    </td>
</tr>

但Outlook的电子邮件形式如下:

    <tr><td =
style=3D'padding:1.5pt 0in 1.5pt 0in'></td><td width=3D20 =
style=3D'width:15.0pt;padding:1.5pt 0in 1.5pt 0in'><p =
class=3DMsoNormal><b><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
W</span></b><span style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'> <o:p></o:p></span></p></td><td style=3D'padding:1.5pt =
0in 1.5pt 0in'><p class=3DMsoNormal><i><span =
style=3D'font-size:8.5pt;font-family:"Arial","sans-serif";color:#004E7C'>=
<a href=3D"http://example.com/"><span =
style=3D'color:#004E7C'>example.com</span></a> </span></i><span =
style=3D'font-size:12.0pt;font-family:"Times New =
Roman","serif"'><o:p></o:p></span></p></td></tr>

我们有<span>,这会导致麻烦。我如何消除这个<span>

1 个答案:

答案 0 :(得分:0)

简单的解决方案是移除范围并将样式放入TD标记中。无论如何,这实际上是一种更可靠的文本样式。 (另外,当声明html宽度/高度时,你只需要输入数字,就不要添加px。)在样式表中添加一个样式也是一个好主意,因为Outlook喜欢0的P标签填充和边距投入P标签。 E.g。

<style>
p {margin: 0; padding: 0; }
</style>  
---------------------------

<tr style="font-family: Arial, sans-serif;color: #004e7c; margin: 0;padding: 0;">
        <td width="40" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0;"></td>
        <td width="20" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: bold;color: #004e7c;">W</td>
        <td width="260" style="font-family: Arial, sans-serif;color: #004e7c;padding: 2px 0;margin: 0; font-size: 11px;line-height: 16px;font-weight: regular;font-style: italic;color: #004e7c;"><a href="http://example.com/" style="color: #004e7c;font-family: Arial, sans-serif;text-decoration: underline;font-size: 11px;">example.com</a></td>
    </tr>