为HTML电子邮件添加额外的p和span标签

Question

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

在此处输入图片说明

的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，则电子邮件会像这样中断；

在此处输入图片说明

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; margin: 0; padding: 0; 内联到所有图像标签，并将#outlook a {padding:0;}到标题样式标签。 另外，删除锚点和图像标签之间的空间可能会阻止跨度的出现。 不确定100％，但值得一试。

如果这些都.ecxMsoNormal ，请像在网络上一样尝试在样式标签中定位.ecxMsoNormal 。 您在此处应用的所有样式都应在Outlook读取时生效（与Gmail不同）。

为HTML电子邮件添加额外的p和span标签

问题描述

1 个解决方案

解决方案1
0 2014-03-28 21:11:51

为HTML电子邮件添加额外的p和span标签

问题描述

1 个解决方案

解决方案1 0 2014-03-28 21:11:51

解决方案1
0 2014-03-28 21:11:51