IE中电子邮件布局损坏，图像与colspan

Question

我有一个基于表格的HTML电子邮件布局，在IE中中断了。我设置了 3 个单元格的宽度，然后在下一行中使用 colspan 3 并放置一个等于 3 个单元格宽度的图像，这否定了设置的宽度。

要比较的完整示例：http://codepen.io/mikevoermans/pen/bLpjB

电子邮件摘录：

<table width="500" cellpadding="0" cellspacing="0" border="1">
<tr>
    <td colspan="3" style="font-size: 1px; line-height: 1px; background: #838383;" height="10">&nbsp;</td>
</tr>
<tr>
    <td width="10%" style="background: #838383;">&nbsp;</td>
    <td width="84%" style="font-family: sans-serif; font-size: 10px; line-height: 16px; color: #f2f2f2; text-align: right; background: #838383;">
        Trouble viewing this message? 
    </td>
    <td width="6%" style="background: #838383;">&nbsp;</td>
</tr>
<tr>
    <td colspan="3"><!-- This is where it breaks the layout -->
        <img src="http://placedog.com/500/200" alt="" width="500" height="200" style="display:block; border:none;" />
    </td>
</tr>
<tr>
    <td>&nbsp;</td>
    <td>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </td>
    <td>&nbsp;</td>
</tr>
</table>

如果我在新表中将图像周围的行环绕起来(关闭第一个表并在它之后开始一个新表(，布局也会得到纠正。我想我想知道为什么它会破裂，而不是修复它的黑客方法，我已经有了。

Answer 1

尝试使用内联样式将图像宽度设置为 100%，将高度设置为 200px。

<img src="http://placedog.com/500/200" alt="" style="width:100%;height:200px;display:block; border:none;" />