为什么Firefox和Opera忽略显示内的最大宽度：table-cell？
以下代码在Chrome或IE中正确显示（图像宽度为200px）。 在Firefox和Opera中， max-width样式完全被忽略。 为什么会发生这种情况，是否有一个好的解决办法？ 另外，哪种方法是最符合标准的？
注意
一个可能的解决方法是将max-width设置为200px 。 不过，这是一个颇为人为的例子。 我正在寻找一个可变宽度容器的策略。
<!doctype html> <html> <head> <style> div { display: table-cell; padding: 15px; width: 200px; } div img { max-width: 100%; } </style> </head> <body> <div> <img src="http://farm4.static.flickr.com/3352/4644534211_b9c887b979.jpg" /> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis ante, facilisis posuere ligula feugiat ut. Fusce hendrerit vehicula congue. at ligula dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. leo metus, aliquam eget convallis eget, molestie at massa. </p> </div> </body> </html>
[更新]
正如下面的mVChr所述， w3.org规范指出max-width不适用于inline元素。 我试过用div img { max-width: 100%; display: block; } div img { max-width: 100%; display: block; } div img { max-width: 100%; display: block; } ，但似乎没有解决这个问题。
[更新]
我仍然没有解决这个问题。 不过，我正在使用下面的JavaScript hack来解决我的问题。 本质上，它重新创build上面的情况，并检查浏览器是否支持display: table-cell max-width 。 （使用数据URI防止额外的http请求，下面的是一个3×3 bmp。）
jQuery( function ( $ ) { var img = $( "<img style='max-width:100%' src='" + "data:image/bmp;base64,Qk1KAAAAAAAAAD4AAAAoAAAAAwAAA" + "AMAAAABAAEAAAAAAAwAAADEDgAAxA4AAAAAAAAAAAAAAAAAAP//" + "/wAAAAAAwAAAAKAAAAA%3D" + "'>" ) .appendTo( $( "<div style='display:table-cell;width:1px;'></div>" ) .appendTo( "body" ) ); $.support.tableCellMaxWidth = img.width() == 1; img.parent().remove(); });
w3.org规范指出max-width不适用于内联元素，所以你将在浏览器中获得不一致的行为。 我不确定你的预期结果，但是如果你设置了div img { display:block } ，那么你可以实现它，然后将img和p标签与浮动alignment，而不是标准的内联alignment。
你需要做的是把你的包装div（具有display: table-cell那个）放在另一个具有display: table 和 table-layout: fixed div中。 这使Firefox和Opera都遵守max-width规则。
在jsFiddle上看到这个例子 。
我通过使用width: 100%而不是max-width: 100% 。
设置宽度：100％确实解决了这个问题，但引入了另外一个。 在WordPress中，您不想将宽度设置为100％。 如果图像是中等大小的，宽度为300px，那又如何呢？ 我一直在使用类来设置中等大小的宽度为50％，但如果图像较小？ 然后它会被拉长。 在webkit浏览器中，它可以使用width：auto; 最大宽度：100％; 但是由于Firefox，Opera和IE忽略了…这是一个巨大的问题。
这已成为一个非常令人困惑的话题…
表格元素中的最大宽度不适用于内联元素。 如果它的显示屏被设置为阻止，它可以在图像上工作，但是什么是100％？ 在表格布局中，单元格的内容推动列宽以尽可能容纳所有内容。 因此在大多数情况下，表格单元内的最大宽度：100％最终成为内容的自然宽度。
这就是为什么以像素为单位设置图像的最大宽度属性的原因：
<style> div { display: table-cell; padding: 15px; width: 200px; } div img { max-width: 200px; display:block;} </style>
table-layout: fixed ，如Alex所build议，如果图像不在表格的第一行，可能会工作，因为第一行的内容决定了列的宽度。
对于一个特定的情况，还有另一个解决方法，我偶然在网上find：如果您使用display: table; + display: table-cell; 在一个响应式网站中模仿两个（或更多）的列布局，试试这个：给侧边栏一个350px的宽度，网站的主要内容部分宽度如下width: calc(100% - 360px); 。 这对我来说是诀窍，而奖金是我需要一个固定宽度的侧边栏。 我也想和em一起工作。
当然，这是js依赖的，但是现在应该不止这些。
你有没有尝试添加位置属性到您的图像？ img {position:relative;} ？ 它应该符合父元素。
添加float: left的CSS CSS
我有同样的问题。 我通过这样做解决了这个问题：
testing在Opera和Fi
.classname { max-width: 100%; width: 100%; display: table-cell !important;}
