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.
I got it working by using width: 100% instead of max-width: 100%.
Setting width: 100% does fix the problem, but it introduces another one. In WordPress you don't want to set width: 100% to an image. What if the image is medium-size with a width of 300px, what then? I've been using classes to set the width to 50% on medium-size, but what if the image is smaller? Then it will get stretched. In webkit browsers it works with width: auto; max-width: 100%; but since Firefox, Opera and IE ignore that... that's a huge problem.
This has become a very confusing topic...
Max-width doesn't work on inline elements neither in table-cell elements. It DOES work on an image if its display is set to block, but what is 100%? In a table layout, the content of a cell pushes the column width to accommodate all content as possible. So max-width:100%, inside a table cell ends up being the natural width of the content in most cases.
That is why setting the max-width property of your image in pixels works:
<style>
div { display: table-cell; padding: 15px; width: 200px; }
div img { max-width: 200px; display:block;}
</style>
table-layout: fixed, as suggested by Alex, may work if the image is not in the first row of the table, because the first row's content dictates columns widths.
For a specific case, there's another workaround that I accidently found online: if you use display: table; + display: table-cell; to mimic a two (or more) column layout in a responsive site, try this instead: give the sidebar a widht of, say, 350px and the main content part of the site a width like width: calc(100% - 360px); . That did the trick for me, and the bonus was I needed a fixed width sidebar. I giess that will work with em's too.
Of course, this is js-dependent, but nowadays should be more than OK.
Have you tried adding a position property to your image? img {position:relative;}? It should conform to the parent element.
add float: left to the div css
I had the same problem. I solved it by doing this:
Tested in Opera and Fi
.classname {
max-width: 100%;
width: 100%;
display: table-cell !important;}
加载中,请稍侯......
精彩评论