Using max-width on images can make them disappear in IE8
I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used img {max-width:100%;} to make sure that images would be downsized rather than overflow in narrower viewports.
It worked great everywhere… until I went to check in IE8. The site’s logo was gone! None of the usual IE bug fixes cured the problem, and it took me quite a while to realise that max-width was part of the problem.
After a bit of trial and error it turned out that if an image has a max-width specified through CSS, a width attribute in the HTML, and is the child of a floated element that has no explicit width set, IE8 makes its width zero. I’m not sure if this behaviour is correct, but it sure doesn’t seem intuitive. If this happened with images that did not have a width attribute it would be slightly more logical to me. And it seems to happen only in IE8 (and only in standards mode).
Anyway, there are several ways of fixing this if you want the image to appear in IE8:
- Remove the
imgelement’swidthattribute from the markup - Give the floated element an explicit width
- Give the problematic image a
width:autoormax-width:nonedeclaration
The best bet here is, I believe, to specify width:auto for any images inside floated elements without explicit widths.
Check the Disappearing image with max-width demo page—there should be three logos. The first will not appear in IE8, the second has width:auto and appears everywhere, as does the third since it has no dimensions specified in the markup.
A mystery bug for sure.