我有一个基于表格的 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"> </td>
</tr>
<tr>
<td width="10%" style="background: #838383;"> </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;"> </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> </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> </td>
</tr>
</table>
如果我在新表格中围绕图像换行(关闭第一个表格并在其后开始一个新表格)，布局也会得到更正。我想我想知道为什么它会损坏，而不是用一种老套的方法来修复它，我已经知道了。
最佳答案
尝试使用内联样式将图片宽度设置为 100%，高度设置为 200px。
<img src="http://placedog.com/500/200" alt="" style="width:100%;height:200px;display:block; border:none;" />
关于html - IE 中的电子邮件布局损坏，图像带有 colspan，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19276938/