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).
Read the full article: Using max-width on images can make them disappear in IE8.