为什么IE不用流体图像子对象表宽度

Question

请考虑以下代码:

HTML:

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

CSS:

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

图像显然应该是窗口宽度的十分之一,这正是除了IE之外的每个浏览器中的图像,它只是回落到原始大小.

但是,考虑一下:

HTML:

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

CSS:

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

IE确实正确,并显示在窗口宽度的第10位.

---

所以,这里有一个问题:是什么导致了这种行为,以及可以采取什么措施来强制IE遵守表格的宽度？

在IE8和IE9中测试过(不关心IE7及以下版本).

Answer 1

如果你table-layout: fixed;在表css中指定它可以工作.

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

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

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