Mozilla Firefox 1.0.6

Internet Explorer 6

以前書いた記事で偉そうに「IEがバグる！」って言っておきながら、かなりの時間放置する結果となった内容。未だに回避方法が見つからないので今回はただの報告となります。最近こんなことばっかり書いてるなー。

サンプルページ

これは、floatした画像の高さが奇数の場合、絶対配置した要素の下に1px分画像がはみ出るというバグです。IE6で発生しました。Firefox1.0.6、Netscape7.1、Opera8.5では発生しませんでした。これもGoogleで調べましたが見つかりませんでした。さすがに1pxのずれなので、フロートの配置が下にずれているのか、絶対配置が上にずれているのかは分かりません。でもずれるのは確かです。

このバグで最も驚くべきことは、画像の高さが関係しているということです。一体どういう実装をすればこんなことが起きるのやら… 最初に書いたとおり、まだ回避方法は分かっていません。とりあえず、floatを使ったガチガチのレイアウトは止めましょうということしか言えません

実際floatを使って1px単位まで計るガチガチレイアウトなんてやらないでしょうが、今回ちょっと挑戦したいことがあったので、ガチガチレイアウトをしようと色々いじっていたらこれにぶつかりました。チキショー やっぱりwidthを指定しないで画像に影をつけるのはムリなのかー。

これも再現方法がこれ以上抽象的な表現が見つからなかったので「高さが奇数の画像」と言っていますが、もしもっと適切な再現方法があるなら教えてください。