0

我有一个基于表格的 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>

如果我在新表中围绕图像包装行（关闭第一个表并在其后启动一个新表），则布局也会得到纠正。我想我想知道它为什么会坏，而不是用一种老套的方法来修复它，我已经有了。

4

1 回答 1

1

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

<img src="http://placedog.com/500/200" alt="" style="width:100%;height:200px;display:block; border:none;" />
于 2013-10-09T16:04:08.067 回答