在行中包含大图像时，如何使 IE 11 尊重表格中的列宽？
Posted
技术标签:
【中文标题】在行中包含大图像时，如何使 IE 11 尊重表格中的列宽？【英文标题】：How to make IE 11 honour columns widths in tables when containing large images in rows? 【发布时间】：2015-09-22 20:23:21 【问题描述】：以下内容在 Chrome（最新）中运行良好，奇怪的是在过时的 IE 版本中 - 但在最新的 IE 版本 (11) 中，它的行为似乎不像我想要的那样。
在 Chrome（最新）和过时的 IE 版本中，第 1 列不会更改其宽度以适应第 2 列中的大图像，但在最新的 IE 版本 (11) 中会更改 - 如何更正此问题？
<table>
<tr>
<td class="header">
Column 1
</td>
<td class="header">
Column 2
</td>
</tr>
<tr>
<td class="body_twenty">
<table>
<tr>
<td>
Test...
</td>
</tr>
</table>
</td>
<td class="body_eighty">
<table>
<tr>
<td>
Test...
</td>
<td>
Test...
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="body_twenty">
<table>
<tr>
<td>
Test...
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td class="body_eighty">
Test...
<img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg">
</td>
</tr>
<tr>
<td class="footer">
</td>
<td class="footer">
</td>
</tr>
</table>
见：https://jsfiddle.net/tLfur3xz/1/
【问题讨论】：
【参考方案1】：如果我也通过添加img width: 100% 给图像一个宽度，它会起作用。
Solution
【讨论】：
【参考方案2】：将 img 元素的 max-width: 100% 更改为 width: 100%。
https://jsfiddle.net/tLfur3xz/3/
如需了解更多信息，请参阅this question。
如果指定表格布局：固定；在表格 css 中它可以工作。
标准中似乎有一些相互矛盾的术语 关于表格布局。特别是 table-layout: auto;是这样说的：
列宽由单元格中最宽的牢不可破的内容设置
列宽由单元格中最宽的牢不可破的内容设置 由于图像内容是牢不可破的，它设置了单元格的宽度 到内容的大小。最大宽度似乎被它覆盖了。
但是，在这种情况下，我认为在 img 元素上使用 max-width 和 width 之间没有区别，所以简单地设置宽度对我来说似乎是更好的选择。
【讨论】：
有趣的是，我正要链接到同一个问题，但那里给出的解释并不建议使用width: 100%，而是table-layout: fixed，就像@RickHitchcock 建议的那样。
在跨 IE 过去和现在以及 Chrome（最新）进行测试时，表格布局方法似乎效果更好。但感谢您的回复。【参考方案3】：
添加此样式：
table
table-layout: fixed;
Updated Fiddle
当你使用fixed时：
表格和列的宽度由表格和列的宽度设置 元素或第一行单元格的宽度。
MDN documentation
【讨论】：
【参考方案4】：我发现很多 IE 问题是这样的：您必须在 <head> 中添加以下两行
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
这解决了几个我花了很多时间解决的问题。
【讨论】：
你能解释一下这是做什么的吗？以上是关于在行中包含大图像时，如何使 IE 11 尊重表格中的列宽？的主要内容，如果未能解决你的问题，请参考以下文章