表Outlook 2010上的HTML电子邮件填充

时间:2016-07-30 19:09:49

标签: html email outlook html-email

我正在尝试构建一个有点复杂的html电子邮件,我遇到填充问题。

我有一张有三个牢房的桌子。第一个单元格是左侧的间隔单元格。第二个单元格中有一个表来保存文本。第三个单元格有一个CTA按钮(图像)。

中心单元格顶部有额外的填充物,我无法弄清楚它的来源。

我的目标是在中间单元格顶部填充4px,在右侧单元格顶部填充8px。这样,中间单元格中标题文本底部的边框(“单元格中的随机复制”)与右侧单元格中的CTA按钮对齐。

当我在Outlook 2010和Gmail IOS应用程序中进行测试时,看起来好像在中间单元格的顶部有额外的填充(它似乎是缩进填充的两倍)。

<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="142"></td>
                            <td width="310" style="padding: 0;">
                                <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpading="0">
                                    <tr>
                                        <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;">
                                              Random Copy In Cell
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333;  text-align: left;">
                                                <tr>
                                                    <!-- Model Specs -->
                                                    <td style="padding-bottom: 2px; padding-top: 4px">
                                                        <p style="font-size: 11px; margin-bottom: 0;">
                                                          <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span>
                                                        </p>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;">
                                                        <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
                                                            - The first selling point
                                                            <br /> - The second selling point
                                                            <br /> - The third sell point/
                                                            <br />&nbsp;&nbsp;The fourth selling point
                                                            <br /> - Selling point
                                                        </p>
                                                    </td>
                                                    <!-- Model Specs -->
                                                </tr>
                                            </table>
                                        </td>
                                        <td>
                                            <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333;  text-align: left;">
                                                <tr>
                                                    <!-- Model Specs -->
                                                    <td style="padding-bottom: 0px; padding-top: 4px;">
                                                        <p style="font-size: 11px; margin-bottom: 0;">
                                                          <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span>
                                                          <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
                                                            <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span>
                                                          <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span>
                                                          <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span>
                                                          <br />
                                                          <br />
                                                          <br />
                                                          <br />
                                                        </p>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>                                
                            <td width="125" valign="top" style="padding-top: 8px;">
                              <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
                            </td>
                        </tr></table>

1 个答案:

答案 0 :(得分:1)

它导致问题的最后style="padding-top: 8px;"中的<td>。将其更改为此可解决Outlook 2007/10/13和Gmail中的问题:

       <td width="125" valign="top">
            <table cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td style="padding-top: 8px;">
                        <a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
                    </td>
                </tr>
            </table>
        </td>

不确定您的代码段之外的代码是什么,但在<head>中添加一些CSS重置将有助于进一步防范此问题。我在你的例子中添加了一些,这里是完整的代码:

&#13;
&#13;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        /* What it does: Remove spaces around the email design added by some email clients. */
        /* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
        html,
        body {
            margin: 0 auto !important;
            padding: 0 !important;
            height: 100% !important;
            width: 100% !important;
        }
        /* What it does: Stops Outlook from adding extra spacing to tables. */
        table,
        td {
            mso-table-lspace: 0pt !important;
            mso-table-rspace: 0pt !important;
        }
        /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
        table {
            border-spacing: 0 !important;
            border-collapse: collapse !important;
            table-layout: fixed !important;
            margin: 0 auto !important;
        }
        table table table {
            table-layout: auto; 
        }
    </style>
</head>
    
<body width="100%" style="margin: 0;">
	<table border="0" width="100%" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
        <tr>
            <td width="142" style="line-height: 0; font-size: 0;">&nbsp;</td>
            <td width="310" valign="top" bgcolor="red">
                <table style="text-align: left; border-collapse:collapse;" border="0" bgcolor="#ccd6df" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="325" colspan="2" style="border-collapse:collapse; border-bottom: 1px solid #000; font-size: 14px; padding-top: 4px;">
                              Random Copy In Cell
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <table bgcolor="#ccd6df" width="160" border="0" cellpadding="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333;  text-align: left;">
                                <tr>
                                    <!-- Model Specs -->
                                    <td style="padding-bottom: 2px; padding-top: 4px">
                                        <p style="font-size: 11px; margin-bottom: 0;">
                                          <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Headline Copy</span>
                                        </p>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: left; padding-left: 10px; padding-bottom: 10px;">
                                        <p style="font-size: 9px; padding-left: 2px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
                                            - The first selling point
                                            <br /> - The second selling point
                                            <br /> - The third sell point/
                                            <br />&nbsp;&nbsp;The fourth selling point
                                            <br /> - Selling point
                                        </p>
                                    </td>
                                    <!-- Model Specs -->
                                </tr>
                            </table>
                        </td>
                        <td>
                            <table bgcolor="#ccd6df" width="140" border="0" cellspacing="0" style="line-height: 14px; font-family: sans-serif; color: #333333;  text-align: left;">
                                <tr>
                                    <!-- Model Specs -->
                                    <td style="padding-bottom: 0px; padding-top: 4px;">
                                        <p style="font-size: 11px; margin-bottom: 0;">
                                          <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Another selling point</span>
                                          <span style="font-size: 9px; padding-top: 0; margin-top: 0; margin-bottom: 2px;">
                                            <br />&nbsp;&nbsp;&nbsp;&nbsp;- Another selling point </span>
                                          <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Selling point</span>
                                          <br /> <img width="7" src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/30740807-42b8-4307-bccc-62ae9c6064b5.png?ver=1466649683000" />&nbsp;<span style="padding-bottom: 1px;">Last selling point</span>
                                          <br />
                                          <br />
                                          <br />
                                          <br />
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>                                
            <td width="125" valign="top">
             	<table cellspacing="0" cellpadding="0" border="0">
                    <tr>
                    	<td style="padding-top: 8px;">
                    		<a href="http://google.com/"><img src="https://mlsvc01-prod.s3.amazonaws.com/6f8ceec6001/e21a0a7c-ccb7-4287-b1bb-52c626cd069e.jpg?ver=1469823545000" /></a>
                    	</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
&#13;
&#13;
&#13;