Outlook 2007/2010添加表格單元格內的空間

我正在構建一個響應式時事通訊，它可以在除Outlook 2007 & 2010之外的所有瀏覽器和電子郵件客戶端中正確顯示（儘管在Outlook 2003和以前以及2013和更高版本上都可以）。Outlook 2007/2010添加表格單元格內的空間

有內部標題的表格單元格中的一個增加了額外的18像素的空間：

隨着一些說明：

是AA表裏面我的第一個細胞，似乎有有效的高度（186px）。和圖片的高度是186px，但是他們的細胞更大。

這裏是頭HTML：

<tr> 
    <td align="left" valign="top"> 
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff"> 
     <tr> 
     <td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9"> 
      <table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
      <tr> 
       <td width="20" rowspan="5" class="head-left-margin"> </td> 
      </tr> 
      <tr> 
       <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;"> 
       <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell"> 
       <img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;"> 
       N&deg;1 | Octobre 2015 
       </td> 
      </tr> 
      <tr> 
       <td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;"> 
       <img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" /> 
       </td> 
      </tr> 
      </table> 
     </td> 
     <td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2"> 
      <img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" /> 
     </td> 
     <td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3"> 
      <img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" /> 
     </td> 
     </tr> 
    </table> 
    </td> 
</tr>

我試過很多補丁，沒有工作：將line-height到細胞包含圖像與mso-line-height-rule: exactly之前，倒塌HTML，以消除任何空間，改變的doctype ...我這裏有點想法，任何人都知道這裏發生了什麼？

來源

2015-10-13 vard

我發現了什麼是錯的，這是很平凡的。我的表的第一行（rowspan）缺少第二個單元 - 所以表格佈局是錯誤的。

只需通過改變：

<tr> 
    <td width="20" rowspan="5" class="head-left-margin"> </td> 
</tr> 
<tr> 
    <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell"> 
    <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /> 
    </td> 
</tr>

要：

<tr> 
    <td width="20" rowspan="4" class="head-left-margin"> </td> 
    <td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell"> 
    <img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /> 
    </td> 
</tr>

固定的問題。之後，我的圖像在高度爲< 15px的單元格之後仍然有一個像素垂直間距。感謝zazzyzeph的回答，我通過將line-height和font-size更改爲0px（設置圖片的高度不適用於我）來修復該問題，其中mso-line-height-rule，在圖片上添加margin: 0，並摺疊代碼以在代碼之前/之後不留空格圖片。

例如：

<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>

與所有這些解決我的頭現在完全顯示所有的電子郵件客戶端。

來源

2015-10-14 17:03:01 vard

很高興你得到它的工作！如果你可以找到一種方法來重建模板，而不使用'font-size：0px'技巧，我會推薦它：SpamAssassin（一個非常受歡迎的過濾器）會給你每個實例的垃圾點。在這種情況下，它可能會很好，但請查看http://isnotspam.com/ – zazzyzeph

很好的知道，我沒有意識到這一點。我剛剛在你鏈接的網站上做了一個測試，我有3.9分 - 它有點高但不被視爲垃圾郵件。我認爲我現在就要這樣做了，因爲通訊必須在今天發送，但下次我一定會記住這一點。再次感謝你的幫助。 – vard

這是因爲你有一個細胞（第7行）是< 15px高。 Outlook 2007和13將擴大你擁有的任何單元格這下15

解決方法：

<tr valign="bottom"> 
    <td height="9" style="font-size:9px; line-height:9px;"> 
     &nbsp; 
    </td> 
</tr>

我通常避開這樣做，通過使用padding-top和底部上td S（嵌套表在需要的地方）

來源

2015-10-13 20:55:13 zazzyzeph

嘿，並感謝您的調查。這就是我已經嘗試過沒有運氣，我也試過'mso-line-height-rule'，並且爲所有單元格設置了line-height/font-size，但沒有幫助。我更新了代碼以反映這一點。 – vard

Outlook 2007/2010添加表格單元格內的空間

回答

相關問題