Question

我的html电子邮件布局如下;

enter image description here

HTML

<html>
<head>
<title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" height="100%" align="center">
    <tr>
    <td align="center" valign="middle">
        <table width="602" height="556" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="5">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_01.jpg" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
                    </a>
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="5">
                    <img src="images/img_02.jpg" alt="" height="360" style="display:block; border:none; line-height:0;" width="602" >
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_03.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="118" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_04.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="96" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_05.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="194" >
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_06.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="110" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_07.jpg" alt="" height="57" style="display:block; border:none; line-height:0;" width="84" >
                </td>
            </tr>
            <tr>
                <td style="line-height:0; font-size:0px;" colspan="3">
                    <img src="images/img_08.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="408" >
                </td>
                <td style="line-height:0; font-size:0px;">
                    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
                        <img src="images/img_09.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="110" >
                    </a>
                </td>
                <td style="line-height:0; font-size:0px;">
                    <img src="images/img_10.jpg" alt="" height="48" style="display:block; border:none; line-height:0;" width="84" >
                </td>
            </tr>
        </table>
        </td>
</tr>
</table>

</body>
</html>

以上代码适用于gmail，outlook 2007，outlook.com。但是，如果我将此邮件从outlook 2007转发到outlook.com，则会发送电子邮件，如下所示;

enter image description here

Outlook为图像的锚标记添加额外的p和span标记，并为它们提供样式。所以我的布局，如上图所示。

原始代码;

<td style="line-height:0; font-size:0px;" colspan="5">
    <a style="line-height:0; font-size:0px;" href="http://www.google.com">
        <img src="imagepath" alt="" height="91" style="display:block; border:none; line-height:0;" width="602" >
    </a>
</td>

样式代码（转发邮件后）;

<td colspan="5" style="padding:0cm 0cm 0cm 0cm;">
    <p class="ecxMsoNormal" style="line-height:0%;">
        <a href="http://www.google.com/" target="_blank" class="">
            <span style="font-size:1.0pt;color:blue;text-decoration:none;">
                <img border="0" width="602" height="91" id="ecx_x0000_i1034" src="imagepath" class="">
            </span>
        </a>
        <span style="font-size:1.0pt;"></span>
    </p>
</td>

的jsfiddle

http://jsfiddle.net/zc7nL/

我该如何解决这个问题？

Answer 1

不幸的是，没有办法阻止Outlook添加<p>标记，我们只需要找到将它们归零的方法。尝试将margin: 0; padding: 0;内嵌添加到所有图片代码中，并将#outlook a {padding:0;}添加到标题样式标记中。同时删除锚点和图像标签之间的空间可能会阻止跨度出现。不是100％肯定，但值得一试。

如果这些都不起作用，请尝试在样式标记中定位.ecxMsoNormal，就像在网络上一样。您应用的任何样式都应该在Outlook读取时生效（与Gmail不同）。

为html电子邮件添加额外的p和span标记

1 个答案: