以下代码在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; }，但似乎无法解决问题。
[更新]
对于这个问题，我仍然没有解决方案。但是，我正在使用以下JavaScript hack来解决我的问题。从本质上讲，它重新创建浏览器是否支持上述情况，并检查max-width内display: table-cell。（使用数据uri可以防止额外的http请求。下面的请求是3x3 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();
});