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

问题描述

考虑以下代码:

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:

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

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

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 不尊重带有流体图像子项的表格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！