Why do Firefox and Opera ignore max-width inside of display: table-cell?
The following code displays correctly in Chrome or IE (the image is 200px wide). In Firefox and Opera the max-width style is ignored completely. Why does this happen and is there a good work around? Also, which way is most standards compliant?
Note
One possible work around for this particular situation is to set max-width to 200px. However, this is a rather contrived example. I'm looking for a strategy for a variable width container.
<!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>
[Update]
As stated by mVChr below, the w3.org spec states that max-width does not apply to inline elements. I've tried using div img { max-width: 100%; display: block; }, but it does not seem to correct the issue.
[Update]
I still have no solution for this issue. However, I am using the following javascript hack to fix my problems. Essentially, it recreates the situation above and checks if the browser supports max-width within display: table-cell. (Using a data uri prevents an extra http request. The one below is a 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();
});
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule.
See this example on jsFiddle.
The w3.org spec states that max-width does not apply to inline elements, so you will get inconsistent behavior across browsers. I'm not sure of your intended outcome, but you may achieve it if you set div img { display:block } and then align the img and p tags with floats instead of standard inline.