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 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 img element’s width attribute from the markup
• Give the floated element an explicit width
• Give the problematic image a width:auto or max-width:none declaration

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.

Taken from: 456 Berea Street  : http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/