为什么 IE 不尊重带有流体图像子项的表格宽度 [英] Why doesn't IE respect table width with fluid image child

问题描述

考虑以下代码:

HTML:

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

CSS:

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

图像显然应该是窗口宽度的 10 分之一，这正是它在除 IE 之外的所有浏览器中的情况，在那里它只是回退到其原始大小.

The image should obviously be a 10th the width of the window, which is exactly what it is in every browser except IE, where it simply falls back to its original size.

但是，考虑一下:

HTML:

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

CSS:

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

哪个 IE 做对了，并显示在窗口宽度的 10 分之一处.

which IE does get right, and displays at a 10th of the window width.

那么，问题来了:是什么导致了这种行为，以及如何强制 IE 遵守表格的宽度?

So, here's the question: what causes this behavior, and what could possibly be done to force IE to respect the table's width?

在 IE8 & 中测试IE9(不关心IE7及以下).

推荐答案

如果你在表格 css 中指定 table-layout: fixed; 就可以了.

If you specify table-layout: fixed; in the table css it works.

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

There seems to be some contradictory terminology in the standard regarding table layouts. In particular, table-layout: auto; says this:

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

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

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

Since the images content is unbreakable, it sets the width of the cell to the size of the content. The max-width seems to be overriden by it.

这篇关于为什么 IE 不尊重带有流体图像子项的表格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！