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
| October 11, 2012 @ 13:34:13 | Current Revision | ||
|---|---|---|---|
| Content | |||
| Added: I recently ran into a problem that was really hard to figure out. I was working on a responsive design where I used <code>img {max-width:100%; }</code> to make sure that images would be downsized rather than overflow in narrower viewports. | |||
| Added: 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 <code>max- width</code> was part of the problem. | |||
| Added: After a bit of trial and error it turned out that if an image has a <code>max- width</code> specified through CSS, a <code>width< /code> 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 <strong> not</strong>have a <code>width< /code> attribute it would be slightly more logical to me. And it seems to happen<strong> only</strong> in IE8 (and only in standards mode). | |||
| Added: Anyway, there are several ways of fixing this if you want the image to appear in IE8: | |||
| Deleted: | Added: <ul> | ||
| Added: <li>Remove the <code>img< /code> element’s <code> width</code> attribute from the markup</li> | |||
| Added: <li>Give the floated element an explicit width</li> | |||
| Added: <li>Give the problematic image a <code>width: auto</code> or <code>max- width:none</code> declaration</li> | |||
| Added: </ul> | |||
| Added: The best bet here is, I believe, to specify <code> width:auto</code> for any images inside floated elements without explicit widths. | |||
| Added: Check the <a href="http:// www.456bereastreet.com/lab/ img-max-width/ ">Disappearing image with max-width demo page</a> – there should be three logos. The first will not appear in IE8, the second has <code>width: auto</code> and appears everywhere, as does the third since it has no dimensions specified in the markup. | |||
| Added: A mystery bug for sure. | |||
| Added: Taken from: 456 Berea Street : <a href="http:// www.456bereastreet.com/archive/ 201202/using_ max-width_on_ images_can_make_ them_disappear_in_ie8/" target="_blank" >http://www.456bereastreet.com/ archive/201202/using_max- width_on_images_can_make_ them_disappear_in_ie8/</a> | |||
Note: Spaces may be added to comparison text to allow better line wrapping.
No comments yet.