0

我的 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>

提琴手

http://jsfiddle.net/zc7nL/

我该如何解决这个问题？

4

1 回答 1

0

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

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

于 2014-03-28T21:11:51.237 回答