IE5と仲良くなるためのCSS Tips

というか単なる自分のためのメモですが。

例えばリンクつきのh要素やメニューなどのリンク部分に画像を使いたい時に、

h1{

width:120px;

height:30px;

background:url('img/hogehoge.jpg');

margin:0;

padding:0;

}

a{

display:block;

text-indent:-9999px;

width:120px;

height:30px;

}

のようにして、h1要素に背景として画像を指定、a要素をブロックレベルのものとしてレンダリングさせてリンク領域を確保、さらにa要素の文字をtext-indentで画面外に追いやる、ということをしたりします。

IE5でこれをやると、text-indentで文字を移動させた量だけ、背景やリンク領域をひっくるめて移動させてしまうことがあります。そのため、上記のようなCSSを書いた場合、text-indentで指定した分だけa要素が一緒に移動してしまい、リンクが働かなくなることがあります。

上の例の場合、ブロックレベルとしてレンダリングさせているa要素に指定しているwidthを消してやれば、リンク領域が復活します。（※ブロックレベルの要素はもともと親要素の幅いっぱいに表示されることになってるから、だと思う）

また、これと同じような理由で、text-indentを指定した箇所の背景画像がズレたり消えたりします。これに対しては背景画像にx-repeatを指定した上で、text-indentで移動させる量を、背景と指定している画像の幅の倍数にしてやることで対処できます。

ということを踏まえてIE5対応に書き直すと、

h1{

width:120px;

height:30px;

background:url('img/hogehoge.jpg') repeat-x;/*repeat-xをつけておく*/

margin:0;

padding:0;

}

a{

display:block;

text-indent:-1200px;/*text-indent指定する時は必ず画像幅の倍数に設定*/

/*width:120px;  幅は指定しない*/

height:30px;

}

となります。

そういえばIE5のシェアって今どれくらいなんだろう…。