liで作る画像のメニューをのほほんと作っていたら、IE6やMozillaやOperaやSafariではうまく表示されるのに、WindowsのIE5.0で消えてしまったりずれたりすることに気づいた。ぜんぶ、Windows IE5.0のバグによるものと考えられる。まあ、放っておいてもいいのだが、一部はIE5.5でも発症するようなので、いまのところの解決策を書いておく。
メニューの作り方自体は、ADPのCSSロールオーバー参照されたし、で終わりなのだが、簡単に言うと、HTMLのほうは、
<ul id="contents">
<li id="ul01"><a href="http://adp.daa.jp/">ADPホーム</a></li>
<li id="ul02"><a href="http://adp.daa.jp/archives/000378.html">説明エントリ</a></li>
</ul>のようにテキストだけを書いておき、a要素の背景画像をロールオーバーさせ、テキスト部分は横にはみださせて（または画像の背景色と同色にして）見えないようにする。今回は、横にはみ出させるほうを使う。さらに、わかりやすいようにはみださせたやつの一部が見えるようにしてある。利用するときは、リンクの色を背景色になじませるなり、ボタンの横幅を狭くするなり、てきとうに改良してくだされ。
んで、本題。
まずサンプル1。これでも、主要ブラウザではうまく表示されるはず。
それなのに、WindowsのIE5ではうまくいかない。まず、a要素にwidthを指定し、text-indentで横にはみ出させると、WindowsのIE5では内容や背景画像ごとindentされるため、ボタンが消えてしまう。有名なバグらしいので、text-indentとwidthは併用せず、padding-leftなどをつかってはみ出させるのがよい。
さらに、ボタンの各所に微妙に隙間が出来る。ボタンとボタンの隙間は、liあたりにvertical-align: bottom;を指定するといい。ただ、もともとliはブロック要素で、vertical-alignはきかないはずなので、バグ対策といっても書くのは気持ち悪い。よって、一番さいしょの全称セレクタのところでvertical-alignを指定しておく。この現象、IE6でもときどき起こるらしい。
んで、サンプル2。text-indentを使わず、また、vertical-alignをうまく指定しても、WindowsのIE5.0ではボタンの左側にわけのわからない余白が残る。IE5.5でもこういう余白が出ることがある。見た感じは、IE6でlist-style-position: inside;に指定したのと同じような余白だ。このレイアウト崩れを回避するいい方法が浮かばない。
WinIE5でずれた状態（320 by 160 pixels, 6KB）
んで、サンプル3。各liのidに対して、position: absolute;を指定するとボタンの左側の余白も消せる。この場合は、そもそもvertical-align: bottom;を指定する必要もなくなる。うまくいく。ここから、Windows IE5.0ではulに無駄なpaddingが残るんじゃないかなあと推測できるわけだが、どうだろうか。
けっきょく、position: absolute;でがちがちに固めてしまえばなんとかなる、という結論だ。ほんとうは、こうしたくはないのだがやむをえないかなあと。はじめにも書いたとおり、さいきんのブラウザで表示するだけなら、それほどがんばる必要はない。最近のブラウザで見るかぎり、サンプルの表示結果がほとんど変わらなくて、つまらないかもしれないが、少なくとも「消えてしまう」というのはまずいので、覚えておくといいかもしれない。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/377
「liで作るメニューとWindows IE5.0の話」 のことで
消したい文字をspanでかこってそれだけ
display:none で消したらいかがでしょう？
浦島太郎状態のMomomoです。はっきりとは覚えていないのですが、画像表示off、CSSはon、のときにdisplay:noneをするとメニューがわからなくなってしまいます、という話だったと思います。それを気にするかどうか、ですね。
Momomoさんすいませんがメルアドを削除してもらえませんか？