IE6の3pxバグ

なんでこんなブラウザがシェアが半分以上残っているのか謎です。WEB製作者泣かせのIE６について。

前々からたまに3pxバグは引っかかっていてなんとなく覚えてはいたんですが、書くのを忘れていたんで忘れないうちにメモしておきます。

3pxバグはいろいろありますが、今回遭遇したバグは非常にわかりにくいんですが…画像置換で設置したリンクをオンマウスするとボタンの下に3px余白が発生するという不思議な現象です。

一見はしかずという事で、実際の画像を。

上の画像は実際にその現象があったボタン画像です。（美容室のホームページだったんですけど）

上がonmouseout時の画像で下がonmouseoverの画像です。ここで背景の薄いピンクの背景色が指定されているのですが、onmouseoverした時、このピンクの部分が下に3pxほど領域が増えてしまう現象でした。

ソースを見た所、ボタンの領域の横幅指定の数値も間違っている訳でもなく、親要素の横幅のきっちり合っていました。しかし何故かズレル……本当に不思議な現象ですが、最初はどのボタンの要素が増えているのか、親要素のボタンが増えてしまっているのか検討がつかなかった訳です。IEにはfirebugみたいなプラグインもありませんから、地道にちまちまやっていたんですが、どうも原因が突き止められず、一時放っておいたんですね（プロとしてあるまじき行為…X-<）。

後日CSSに詳しい方にアドバイスを求めた所、驚愕の事実が分かりました。曰く

「IE6は親要素に内包されている子要素の幅と、その親要素の横幅がきっちり指定されているとたまに3pxズレル場合があるんですよ」

効いた瞬間「はぁ？」とか思いました。何だってそんなバグ放置しておくんだ？って感じです。正しいマークアップしているのにそれがアダになるなんて甚だ迷惑な話なんですが…まあ、起きてしまうものは仕方ないので、対処法を教えてもらいました。これも曰く

「こういう時は子要素の横幅より親要素の横幅を3pxくらい小さく設定すれば直ります。」

という事でした。

ここでソースの例に行きます。正しい（本来書くべき指定）場合はこんな感じだったよします。

.hoge-oya{
width:600px;
}

.hoge-kodomo-left{float:left;
width:200px;
padding-right:20px;
}

.hoge-kodomo-right{
float:left;
width:380px;
}

この場合普通だったら子要素の合計が600pxになると思うので問題ないのですが、IE6の場合ズレル場合があるので、そう言うときは次のような感じで指定すると直る事があります。

.hoge-oya{width:600px;
_width:587px;
}

.hoge-kodomo-left{
float:left;
width:200px;
padding-right:20px;
}

.hoge-kodomo-right{
float:left;
width:380px;
}

.hoge-oyaの部分にwidthの下に_widthを追加して600px-3px＝587pxを指定します。

プロパティの前の「_」（アンダースコア）はIE6のハックになります。「_」を追加した部分のプロパティはIE6のみ適用されるという仕組みになっています。（ハックについてはここでは詳しく説明しません。詳しく知りたい方は「CSS　ハック」でGoogle検索して勉強してください。）

ちなみに私の場合は3pxではなく5pxくらい指定したら直りました。3pxに限った事ではないようなので、上の例で解決しなくても根気よくいろいろ試してみてください。

ちなみに上記のマークアップでズレル事は稀なようで試しにレンダリングしてみたら特にずれる事は無かったです。まああくまで例題なので、どういう仕組みでズレル現象が発生するのかはよく分かりません。ただ親要素の中にいろいろ入れ子すると起きてしまう事が多いような気がします。何度も言いますが、どういう理屈でそうそうバグが発生しているのかという詳しい原因は分かりませんので、悪しからず。
あくまでそう言う現象が起こったら上の手段も試してみるのも手段の一つとして参考にしてくれればと思います。