2012-02-05 59 views
9

考虑the following code为什么不与流体图像孩子IE尊重表格宽度

HTML:

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

CSS:

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

的图像显然应该是一个第10个窗口的宽度,这正是除了IE之外的每个浏览器的情况,它只是回落到了i ts原始大小。

然而,consider this

HTML:

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

CSS:

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

其IE浏览器得到正确的,并显示在窗口宽度的十分之一。


所以,这里的问题:是什么原因导致这种行为,怎么可能做强制IE尊重表格的宽度?

测试IE8 & IE9(不关心IE7及以下)。

回答

24

如果您在表css中指定,它将起作用。

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

列的宽度是由最宽牢不可破含量在细胞

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

+3

+1。自动表格布局算法是你的敌人。 – bobince 2012-02-05 13:30:28

+0

谢谢,就是这样。任何想法为什么所有其他现代浏览器都赞同'max-width',而IE似乎忽略它? – 2012-02-05 16:51:50

+0

@JosephSilber - 你是否在兼容模式下渲染?您的真实网页是否有适当的文档类型? – 2012-02-05 20:53:24