Rather an odd problem which I can only guess is a browser quirk, but my reason for posting this question is to see if anyone knows of any workaround out of the numerous possibilities that CSS offers.
So here is the basic markup that will trigger the issue:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div { display: block; border: 1px solid blue; float: left; }
div a { display: block; border: 1px solid red; }
div a img { display: block; border: 0; height: 64px; width: auto; }
</style>
</head>
<body>
<div>
<a href="#">
<img src="https://www.google.com/images/errors/robot.png" />
</a>
</div>
</body>
</html>
(the bordering and padding is just for display purposes and has no effect on the outcome)
Out of all the modern browsers I've tested, across three distinct operating systems — I even tested IE7 — the only browser that has a problem is IE8. The problem is quickly illustrated with the following image:
The top image is the original image just to show what it's dimensions are, the bottom left is how the above markup correctly renders — with it's container snapping to meet the scaled image. The bottom right image is IE8's version of events, which as you can see, even though the image has scaled, the parent has kept the image's natural width.
Whilst I would love to ignore IE8 as an annoying blip, I have to at least try everything before I give up on it. I have gone through a range of different styles in an attempt to fix things, even fallen back to just throwing random styles that fix other IE issues — i.e. zoom:1 and overflow:hidden — at the problem.
I've tried:
div { position: absolute; display: block; }
div a img { display: block; border: 0; height: 64px; width: auto; }
or
div { display: block; height: 64px; float: left; }
div a img { display: block; border: 0; height: 100%; width: auto; }
or even...
div { display: inline-block; }
div a img { display: block; border: 0; height: 64px; width: auto; }
and possibly...
div { display: block; float: left; width: 0; }
div a img { display: block; border: 0; height: 64px; width: auto; }
and including!
div { display: block; float: left; width: 0; }
div a img { display: block; border: 0; max-height: 64px; width: auto; }
Any ideas? There might just be some simple trick I'm missing.. I've given up searching because all I find are posts that have nothing to do with this specific issue.