Outlook 2010 表格间距怪异答案

【问题标题】：Outlook 2010 table spacing weirdnessOutlook 2010 表格间距怪异
【发布时间】：2012-11-20 10:18:45
【问题描述】：

在编写 HTML 电子邮件通讯时，Outlook 2010 正在运行。（惊喜惊喜）

以下截图是结果：http://screencast.com/t/PSZqP7wg 此屏幕截图显示了正在发生的事情（相同，但图像已关闭）：http://screencast.com/t/DrbexyHnytJ

显然，中间的白色柱子变窄了。应该是 604px 宽，但要少得多。 Outlook 似乎在间隔图像旁边放置了额外的填充。

有人知道为什么会这样吗？

这是body标签中的来源：

<table width="761" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="3" height="151" style="height: 151px;" style="padding: 0px;"><img width="761" height="151" src="http://www.bothino.be/newsletter/top.jpg" alt="" /></td>
        </tr>
        <tr>
            <td width="77" style="width: 77px;">
                <img src="http://www.bothino.be/newsletter/spacer.jpg" width="77" alt="" />
            </td>
            <td width="604" bgcolor="ffffff">
                test sdlkfjhklsdjfhqsdklfh qklsdfh klqsjf lqksjdf lkqsjdhf lkdflkqshdfkl jqhsdlkfj
                hqslkdfh qlksjdfh lqskjdhf lkqjshdlfk jqhsldkfh qlsdjfh lqksjdflk qsdflkqshdklfh
                klqshdf kqshdklf hqskldfqklsd
            </td>
            <td width="76" style="width: 76px;"><img src="http://www.bothino.be/newsletter/spacer.jpg" width="76" alt="" /></td>
        </tr>
        <tr>
            <td height="151" colspan="3">
                <img width="761" height="151" src="http://www.bothino.be/newsletter/bottom.jpg" alt="" />
            </td>
        </tr>
    </table>

【问题讨论】：

标签： html css email outlook

【解决方案1】：

您只需为两个标签添加背景颜色。宽度显示正确。

【讨论】：

【解决方案2】：

我习惯于在 IE 和 Outlook 中出现“未定义”空格和换行符的问题。它们通常被解释为一个真实的、想要的空间，由最近的父级（如果有的话）格式化。这就是为什么我更喜欢这样写htm：

    <tr>
        <td height="151" colspan="3"><img 
           src="http://www.bothino.be/newsletter/bottom.jpg"
           width="761" height="151" alt="" /></td>
    </tr>

标签内的换行符在显示时不会产生任何影响......但对代码应用类似的结构。重要的部分是TD和IMAGE标签之间没有空格。

也许，这并不能解释和解决屏幕截图中的巨大缩进。

【讨论】：

遗憾的是，事实并非如此。正如您在代码中看到的那样，包含这些缩进的表格单元格已经被编码，没有空格:(（几年前也有过这种经历）

【解决方案3】：

我对 Outlook 的体验是永远不要使用 rowspan 和 colspan 属性。这肯定会造成麻烦。如果表格单元格需要与其上方/下方不同的布局/宽度，请使用正确的布局将另一个嵌套在其中。这样整个基本网格保持不变。不好，但话又说回来：前景很脏，你也会（必须）。所有表格都需要 cellpaddign=0 和 cellspacing=0。这有助于我克服类似的问题。

【讨论】：

【解决方案4】：

有时最好为td 省略宽度，例如为所有td 省略width=77 和其余宽度。这样它就可以自动扩展以填充整行。或者您也可以包含一个带有该 tr 的表。

【讨论】：