为啥 IE 不尊重具有流体图像子项的表格宽度

Posted 2023-03-05

【中文标题】为啥 IE 不尊重具有流体图像子项的表格宽度

【英文标题】：Why doesn't IE respect table width with fluid image child为什么 IE 不尊重具有流体图像子项的表格宽度

【发布时间】：2012-02-27 04:03:28

【问题描述】：

考虑the following code：

HTML：

<table>
    <tr>
       <td><img src="http://watduck.jpg.to" /></td>
    </tr>
</table>

CSS：

table  width: 10% 
img  max-width: 100% 

图像显然应该是窗口宽度的 10 分之一，这正是除了 IE 之外的所有浏览器中的情况，它只是回到原来的大小。

但是，consider this：

HTML：

<div><img src="http://watduck.jpg.to" /></div>

CSS：

div  width: 10% 
img  max-width: 100% 

哪个 IE 正确，并显示在窗口宽度的十分之一处。

---

那么，问题来了：是什么导致了这种行为，以及可以采取什么措施来强制 IE 尊重表格的宽度？

在 IE8 和 IE9 中测试（不关心 IE7 及以下）。

【参考方案1】：

如果您在表格 css 中指定 table-layout: fixed;，它会起作用。

标准中关于表格布局的术语似乎有些矛盾。特别是，table-layout: auto; 说：

列宽由单元格中最宽的牢不可破的内容设置

由于图像内容是牢不可破的，它将单元格的宽度设置为内容的大小。最大宽度似乎被它覆盖了。

【讨论】：

谢谢，成功了。知道为什么所有其他现代浏览器都同意尊重max-width，而 IE 似乎忽略了它？

@JosephSilber - 你是在兼容模式下渲染吗？您的真实页面是否有正确的文档类型？

@MystereMan - 当然可以。似乎出于某种原因 IE 是故意这样做的。

我不知道我是不是一直生活在岩石下？自 2003 年甚至更早以来，我一直在将 PSD 转换为 html/CSS。我总是跳过 IE 上的表格，因为（这无法修复）令人惊讶的是，这救了我。太棒了，非常感谢！

这对我自己不起作用——我还必须将 width: 100% 添加到父表中。