為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