Question

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

Answer 1

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

Answer 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标签之间的无空白。

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

Answer 3

有时候最好省略td的宽度，例如省略width=77和所有td的宽度。这样它就可以自动扩展以填充整行。或者你也可以包括一个表格。

Answer 4

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

Outlook 2010表间距怪异

4 个答案: