私が推測できるだけの奇妙な問題はブラウザーの癖ですが、この質問を投稿する理由は、CSS が提供する多数の可能性から回避策を誰かが知っているかどうかを確認するためです。
したがって、問題を引き起こす基本的なマークアップは次のとおりです。
<!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>
(ボーダーとパディングは表示のみを目的としており、結果には影響しません)
3 つの異なるオペレーティング システムでテストしたすべての最新ブラウザーの中で (IE7 もテストしました)、問題のあるブラウザーは IE8 だけです。この問題は、次の図で簡単に説明できます。
上の画像は、その寸法を示すためだけの元の画像です。左下は、上記のマークアップがどのように正しくレンダリングされるかを示しています — スケーリングされた画像に合うようにコンテナー スナップを使用しています。右下の画像は IE8 のイベントのバージョンです。ご覧のとおり、画像は拡大縮小されていますが、親は画像の自然な幅を維持しています。
私は IE8 を迷惑なブリップとして無視したいと思っていますが、あきらめる前に少なくともすべてを試してみる必要があります。私は物事を修正するためにさまざまなスタイルを試してきましたが、他の IE の問題を修正するランダムなスタイルをスローすることさえありzoom:1ましoverflow:hiddenた。
私はもう試した：
div { position: absolute; display: block; }
div a img { display: block; border: 0; height: 64px; width: auto; }
また
div { display: block; height: 64px; float: left; }
div a img { display: block; border: 0; height: 100%; width: auto; }
あるいは...
div { display: inline-block; }
div a img { display: block; border: 0; height: 64px; width: auto; }
そしておそらく...
div { display: block; float: left; width: 0; }
div a img { display: block; border: 0; height: 64px; width: auto; }
そして含む！
div { display: block; float: left; width: 0; }
div a img { display: block; border: 0; max-height: 64px; width: auto; }
何か案は？私が見逃している単純なトリックがあるかもしれません..この特定の問題とは関係のない投稿しか見つからないため、検索をあきらめました。