HTML電子郵件-Outlook 2007/2010邊框崩潰/間距問題

Question

因此，我遇到了Outlook 2007/2010間距問題（邊界折疊？）。

這是有關其操作的圖像（“ Hurry Now ..”文本被下推）

這是應該看起來像的樣子，並且在所有其他電子郵件客戶端中都可以正常工作。

這是我關於英雄部分的代碼片段

<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：完全； 是特定於Outlook的樣式。 font-size：1px應該與您想要單元格的高度相匹配。 行高：0px; 零表示任何行高空間。

但是，在使用更新的單元格測試代碼段之后，這似乎並不是實際的問題。 我將間隔細胞設為黑色，以便更好地了解實際情況。

黑色間隔單元結束於副本上方，即。 這不是在壓低您的文字。 問題實際上是其中有白色副本的單元格。

我在單元格中增加了行高，並刪除了border-collapse：collapse;。 （您不需要在單個單元格上使用它。您可能只想仔細檢查一下上標是否都很好。

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

結果是：

希望能有所幫助。

Answer 2

Outlook的最小單元格高度為19px，因此，盡管將font-size和line-height設置為零，但作為分隔符的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>而只需使用<br>來分隔行。

Answer 3

我同意約翰的觀點。 只需使用中斷即可創建垂直空白。 您無緣無故地使自己變得更加困難:-)只需將正確的屬性放在正確的位置即可：您對font-tag的使用是壓倒性的， border-collapse:collapse和font-size:0; line-height:0; 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>