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添加表格单元格内的空间

回答

相关问题