HTML 电子邮件 - Outlook 2007/2010 边框折叠/间距问题答案

【问题标题】：HTML Emails - Outlook 2007/2010 border collapse/spacing issueHTML 电子邮件 - Outlook 2007/2010 边框折叠/间距问题
【发布时间】：2013-10-20 21:01:31
【问题描述】：

所以，我遇到了 Outlook 2007/2010 间距（边框折叠？）问题。

这是一张关于它正在做什么的图片（Hurry Now.. 文本被推下）

这是它应该看起来的样子，并且在所有其他电子邮件客户端中都可以正常工作。

这是我的英雄部分的sn-p代码

<table cellpadding="0" cellspacing="0" width="561" align="center" bgcolor="#4b88cf" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:40px; font-weight:normal; line-height:40px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
        <td width="561" height="37" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> &nbsp;</td>
    </tr> <!-- end spacer --> 
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Save 10% on all</font></td> 
    </tr> <!-- heading -->
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">EasyACCT 2013 products.</font></td> 
    </tr> <!-- heading -->
    <tr> 
        <td height="48" valign="top" style="color: #ffffff;"><font color="#ffffff">Only 4 days left!</font></td> 
    </tr> <!-- heading -->
    <tr>
        <td width="561" height="25" style="font-size: 0; line-height: 0" bgcolor="#4b88cf"> &nbsp;</td>
    </tr> <!-- spacer here -->
    <!-- start button --> 
    <tr>
        <td>
            <table cellpadding="0" cellspacing="0" align="left" style="font-family: Tahoma, Arial, Verdana, sans-serif; font-size:14px; font-weight:normal; line-height:20px; text-align:left; color:#ffffff; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                    <td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" border="0" style="display: block;" alt="left side button"/></td> <!-- left side button -->
                    <td align="center" style="font-weight: bold; border-collapse: collapse;" bgcolor="#f0640f"><a href="http://accountants.intuit.com/accounting/lp/quickbooks/easyacct-renew.jsp?s_cid=EM" style="text-decoration: none;"><font color="#ffffff" style="text-decoration: none;">Renew Now to Save 10%</font></a></td> 
                    <td style="border-collapse: collapse;"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" border="0" style="display: block;" alt="right side button"/></td> <!-- right side button -->
                </tr>
            </table>
        </td>
    </tr>
    <!-- end button -->
    <tr>
        <td width="561" height="15" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf">&nbsp;</td>
    </tr> <!-- spacer here -->
    <tr>
        <td valign="top" width="561" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
    </tr> 
    <tr>
        <td width="561" height="23" style="font-size: 0; line-height: 0; border-collapse: collapse;" bgcolor="#4b88cf">&nbsp;</td>
    </tr> <!-- spacer here -->
</table>

【问题讨论】：

Inconsistent spaces below TD elements in tables in HTML email in Outlook (2007 and 2010)的可能重复

标签： html email html-email outlook-2010 outlook-2007

【解决方案1】：

这是我在 Outlook 2007、2010 和 2013 中遇到的问题。它们不喜欢小型单元。

我发现这段代码对我有用，并通过了 Litmus 测试。

<tr height="1">
   <td width="482" height="1" align="left" valign="top" background="#000000" style="background:#000000;font-size: 1px; line-height: 0px; mso-line-height-rule: exactly;">&nbsp;</td>
</tr>

mso-line-height-rule：完全；是一种特定于前景的风格。 font-size: 1px 应该匹配您希望单元格的高度。行高：0px；零是所有行高空间。

但是，在使用更新的单元格测试您的代码 sn-p 之后，这似乎不是实际问题。我将间隔单元设为黑色，以便更好地了解实际情况。

黑色间隔单元在副本上方结束，即。它不会将您的文字向下推。问题实际上是其中包含白色副本的单元格。

我为单元格添加了行高并删除了边框折叠：折叠；（您不需要在单个单元格上使用它。您可能只想仔细检查您的上标是否都很好。

    <tr>
    <td valign="top" width="561" style="font-size: 18px; line-height: 20px; color: #ffffff;"><font color="#ffffff">Hurry, offer ends October 31!<sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></font></td>
</tr>

结果如下：

希望对您有所帮助。

【讨论】：

【解决方案2】：

Outlook 的最小单元格高度为 19 像素，因此作为分隔符的 15 像素单元格似乎正在扩展，尽管您将字体大小和行高归零。

另一种方法是，不要将文本夹在两个间隔行之间，而是增加 1 行并将其垂直居中：

<tr>
    <td valign="middle" width="561" height="50" style="font-size: 18px; color: #ffffff; border-collapse: collapse;"><font color="#ffffff">Hurry, offer ends October 31!</font><sup style="font-size: 12px; line-height: 0; vertical-align: 8px"><font color="#ffffff">1</font></sup></td>
</tr>

在整个电子邮件中，您实际上并不需要为每一行文本单独设置行，只需使用 <br> 来分隔行。

【讨论】：

【解决方案3】：

我同意约翰的观点。只需使用中断来创建垂直空白。你让自己变得更加困难，没有任何理由:-) 只需将正确的属性放在正确的位置：您对字体标签的使用是压倒性的，border-collapse:collapse 和 font-size:0; line-height:0; 也是如此。

如果您想创建一个空白，请在 TD (20px) 和 style="font-size:20px; line-height:20px;" 处指定一个高度，并在里面添加一个 BR 标记（无 nbsp）。

看我的例子：

    <table cellpadding="0" cellspacing="0" border="0" width="561" align="center" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
        <tr><td bgcolor="#4b88cf" align="left" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:40px; line-height:46px; color:#ffffff;"><br />Save 10% on all<br />EasyACCT 2013 products.<br />Only 4 days left!<br /><br /></td></tr>
        <tr><td bgcolor="#4b88cf"><table cellpadding="0" cellspacing="0" border="0" align="left"><tr>
            <td width="12" height="50" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/left-btn.png" width="12" height="50" alt="" border="0" style="display:block;" /></td>
            <td bgcolor="#f0640f" align="center" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:14px; line-height:20px; color:#ffffff;"><a href="http://accountants.intuit.com/accounting/lp/quickbooks/easyacct-renew.jsp?s_cid=EM" style="color:#ffffff; text-decoration:none;"><strong style="color:#ffffff;">Renew Now to Save 10%</strong></a></td>
            <td width="14" bgcolor="#f0640f"><img src="http://intuit.pistonclients.com/13-intu-r-1629/images/right-btn.png" width="14" height="50" alt="" border="0" style="display:block;" /></td>
        </tr></table></td></tr>
        <tr><td bgcolor="#4b88cf" style="font-family:Tahoma, Arial, Verdana, sans-serif; font-size:18px; line-height:20px; color:#ffffff;"><br />Hurry, offer ends October 31!<sup style="font-size:12px; line-height:0; vertical-align:8px">1</sup><br /><br /></td></tr></table>

【讨论】：