0

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

这是一张关于它在做什么的图片（现在快点.. 文本被推下）

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

这是我的英雄部分的代码片段

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

3 回答 3

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；零是任何行高空间。

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

带有黑色间隔单元的代码

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

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

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

结果是这样的：

在此处输入图像描述

希望有帮助。

于 2013-10-16T18:39:46.947 回答
0

我同意约翰的观点。只需使用中断来创建垂直空白。您无缘无故地使自己变得更加困难:-)只需将正确的属性放在正确的位置即可：您对字体标签的使用是压倒性的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>
于 2014-03-17T16:00:26.723 回答
0

Outlook 的最小单元格高度为 19px，因此作为分隔符的 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>分隔行即可。

于 2013-10-14T13:25:21.797 回答