Question

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

这是一张关于它正在做什么的图像（现在快点......文字被推下） http://i43.tinypic.com/2ptnpdi.png

这是它应该是什么样的＆amp;适用于所有其他电子邮件客户端。 http://i43.tinypic.com/i39ieu.png

以下是Hero部分的代码片段

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

Answer 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;零，任何行高空间。

但是，在使用更新的单元格测试代码片段后，这似乎不是实际问题。我将间隔单元设为黑色，这样我就可以更好地了解实际发生的情况。

code with spacer cells made black

黑色间隔物细胞在复制品的正上方终止，即。它没有推动你的文字。问题实际上是包含白色副本的单元格。

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

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

这是结果：

enter image description here

希望有所帮助。

Answer 2

Outlook的最小单元格高度为19px，因此您作为spacer的15px单元格似乎正在扩展，尽管您已将字体大小和行高调零。

另一种方法是，将文本夹在两个间隔行之间，而不是将一行放在较高的行中，而是将其垂直居中：

<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>来分隔行。

Answer 3

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

如果你想创建一个空格，请在TD（20px）和style="font-size:20px; line-height:20px;"处给出一个高度，里面有一个BR-tag（没有）。

参见我的例子：

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

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

3 个答案: