HTML email 中 Outlook（2007 年和 2010 年）中表中 TD 元素下方的空格不一致

Question

我研究了這個問題，在 web 上找到了許多建議的修復程序，但沒有任何效果。

問題是我正在設計的 HTML email 表中特定 TD 元素之間的差距。 僅在 Outlook 2007 和 2010 中以這種方式顯示。

這是問題的屏幕截圖的鏈接

在右側的側邊欄中，“Level 2”與其上方的薄圓角框之間應該沒有間隙。

這是創建藍色框的嵌套表的代碼：

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

如您所見，我已經刪除了所有空白，因為這是我發現的一種解決方法中所建議的。 我還在 TD 元素中插入了 'line-height:0;font-size:0' 樣式，並在圖像本身中插入了 'display:block' 樣式，這也是所有建議的解決方法。 這些都沒有絲毫不同。

此問題不會出現在任何其他 email 客戶端或瀏覽器中。

請幫忙！

Answer 1

Using tables is standard practice in html email builds because css support is poor in email clients, particularly Outlook.

保留您的表結構，但嘗試以下添加：

• 將valign="bottom"添加到包含 box_dark_top.gif 的 td 單元格，並將valign="top"添加到接下來的兩個單元格
• 對於每個圖像，將 css 設置為style="display:block;margin:0;padding:0"

• 使用內聯 css 而不是內部

  <table class="box" width="200" border="0" cellspacing="0" cellpadding="0"> <tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr> <tr> <td valign="top" class="box_dark"> <h2>Level 2<br /><span class="white">Care Assistants</span></h2> <h2>Level 3<br /><span class="white">Senior Carers</span></h2> <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2> </td> </tr> <tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>

Answer 2

我發現 Outlook 正在包裝 img 標簽，並在他們“感覺”喜歡它時設置邊緣頂部的樣式。 您可以檢查通過將 email 保存為 html 生成的 html。

Answer 3

Outlook 2007 以后使用 Word 呈現 HTML。 這是一篇關於此的文章，其中包含指向更強烈的文章和網站的鏈接。

也許您可以嘗試在 Word（或 Outlook 本身）中設計您的消息？ 當然，它可能無法在理智的 email 客戶端中正確呈現。

Answer 4

設置 TD 的高度以及任何其他應該具有固定高度的 TD：

<td valign="bottom" height="10" width="200">

*您還應該在 email 中的所有 TD 上使用寬度。