为什么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％} 
   
 
图像显然应该是窗口的宽度的十分之一，这正是每一个浏览器，除了IE，它只是回到其原始大小。
 
 
 
但是，认为这：
 
 
 
  HTML ：
 
 
 
 < div>< img src =http： /watduck.jpg.to/>< / div> 
  
  CSS： 
  div {width：10％} 
 img {max-width：100％} 
   
 
  
 
 
 $ b  
 所以，这里有个问题：是什么导致这种行为，以及可能做什么来强制IE尊重表的宽度？
 
 
 
 在IE8&如果指定 
解决方案
 table-layout：fixed; 在表css中工作。
 
 
 
在表格布局的标准中似乎存在一些矛盾的术语。特别是 table-layout：auto; 说：
 
 
 
 
 
由于图像内容不可破坏，因此将单元格的宽度设置为单元格的大小的内容。最大宽度似乎被它覆盖。
 
Consider the following code:

HTML:
<table>
    <tr>
       <td><img src="http://watduck.jpg.to" /></td>
    </tr>
</table>
CSS:
table { width: 10% }
img { max-width: 100% }
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.

However, consider this:

HTML:
<div><img src="http://watduck.jpg.to" /></div>
CSS:
div { width: 10% }
img { max-width: 100% }
which IE does get right, and displays at a 10th of the window width.



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

Tested in IE8 & IE9 (don't care about IE7 and below).
解决方案
If you specify table-layout: fixed; in the table css it works.

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屋！