前回のつづきで結局Mac IE5対策としての方法は・・・
考え方としては、MacIE5用とそれ以外用に分けて考えます。
とりあえず、MacIE5用にCSSをしてやり、最後にそれ以外のブラウザ用にCSSを上書きしてやります。
最初は、スタイルシートをブラウザ別に振り分けようと思ってたんですが、イマイチうまくいかなくって・・・
でも、結果的には、振り分ける必要もなく、１つのスタイルシートで済んだのでOK.
まず、HTMLの方ですが、前回は・・・
<div id="button">
<h1><a xhref="next.html"><span></span>ここはボタン</a></h1>
</div>
でしたが、こうではなく、
<div id="button">
<h1><a xhref="next.html"><span>ここはボタン</span></a></h1>
</div>
こうです。挟めばよかったんすよ！
ほんでもって・・・
肝心のスタイルシートでは、
#button {
background-image: url(img/button.gif);
background-repeat: no-repeat;
width: 200px;
height: 50px;
position: relative;
}
#button h1 {
text-indent: -5000px;
}
#button h1 a {
display: block;
width: 200px;
height: 50px;
}
と、ここまでだと前回のやりかたじゃねえか。ってことになるんですが、
このあとに・・・
#button span {
display: none;
}
Mac IE5だけのために<span>タグ（前回でWin IE5.0の為に画像をかぶせるためにつかったやつです。 ）を削除してやります。そしてこの後が、肝心要なところで・・・
/*ELSE MacIE5¥*/
#button span {
background-image: url(img/button.gif);
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
}
/*ELSE MacIE5*/
として、Mac IE5以外のブラウザのために「#button span」の内容を上書きしてやるんです。
この「/*ELSE MacIE5¥*/〜/*ELSE MacIE5*/」てのが、Mac IE5だと理解できないようにするおまじないです。
つまり、前回紹介した２つのやり方の合わせ技+おまじない で出来ました！
でも、なんで<span>タグで挟んだら出来ちゃったのか？それはまだ分かってません。 このやり方ってCSS ZENっていうXHTML + CSSでどれだけレイアウトできるか研究しているようなサイトのソースを見てて思いつきました。
分かる人は教えて頂戴。
※「/*ELSE MacIE5¥*/〜/*ELSE MacIE5*/」は、スタイルシートの一番最後に入れてるべし。