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 nothave a width attribute it would be slightly more logical to me. And it seems to happenonly 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
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.
Taken from: 456 Berea Street : http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/Revisions
- October 11, 2012 @ 13:36:14 [Current Revision] by PeterLugg
- October 11, 2012 @ 13:41:19 [Autosave] by PeterLugg
- October 11, 2012 @ 13:34:13 by PeterLugg
Revision Differences
There are no differences between the October 11, 2012 @ 13:41:19 [Autosave] revision and the current revision. (Maybe only post meta information was changed.)
No comments yet.