html - 为什么 IE 不尊重带有流体图像子项的表格宽度

Question

考虑 the following code :

HTML:

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

CSS:

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

图像显然应该是窗口宽度的十分之一，这正是除了 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 及以下版本)。

Answer 1

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

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

The column width is set by the widest unbreakable content in the cells

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