html - IE で壊れたメール レイアウト、colspan を含む画像

Question

IE で壊れる表ベースの HTML メール レイアウトがあります。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>

新しいテーブルで画像の行をラップすると (最初のテーブルを閉じて、その後に新しいテーブルを開始すると)、レイアウトも修正されます。私はそれが壊れている理由を知りたいと思っていると思います.