WPとかでナビゲーションを作ると、メニューを入れ子にして階層化しますよね。
WordPressでもメニューを階層化することができ、その場合リストを入れ子にして生成されます。
グローバルメニューとかならドロップダウンにしたりすると思いますが、サイドバーの場合、大抵はそのまま階層化させますが、少し装飾したりすると、古いIEは表示がおかしくなります。
というわけで今回はこんなお話
IE6とか7で、入れ子にしたリストの上に変な隙間ができるという問題をやっつけます。
どっちもIE特有のバグっぽいでね。
IETesterのIE6,7それからIE8の開発者ツールにある互換モードで再現できました。
では早速倒しましょう。
入れ子にしたリストの上に変な隙間ができる
意外とこれが厄介もので、はじめて遭遇した時は、変なところのスタイルを継承してるのかと必死に探したのですが、いかんせんIEのデバッグツールは死ぬほど使いにくい。もっとChromeのインスペクタとかを見習ってほしいわ…。
まぁとりあえずいろいろ探したり、!important付き記述も試したのですがダメ。
で、検索したところ、
リストの中のaタグとかに display:boock; とかしてブロック化すると、line-heightの解釈がおかしくなるんだとかなんだとか。
解決方法は、
- display:block;しない。または display:inline; する
- display:inline-block;
- width を指定する
とりあえず、1についてはナビゲーションの場合はちょっと使いにくくなるので今回は却下です。
2はインライン要素とブロック要素のいいとこ取りな奴ですが、IE6とか7はそのままじゃ動かなかったような…。
あと他にも子リストのマーカーがうまく出なかったりとなかなかの問題児。
そこで見つけたのが3番の方法。リストの幅を指定してしまうだけというシンプルなもの。
例えば、
1 2 3 |
ul li ul { width:100%; } |
みたいな感じで、横幅をいっぱいに指定してしまう。
子リストに対して100%指定なら親の幅と同じになるという指定ですので、あまり意識せずに使うことができますね。
これでめでたく隙間がなくなりました。
ちなみに入れ子にしたリストが左にぴったりくっついちゃったら、子リストの方に
1 2 3 |
ul li ul li { margin-left:30px; } |
とかしてあげれば大丈夫なはずです。うちはこれで何とかなりました。
余談ですが、このブログはもともとMacで作ってMacで更新してます。
仕事でIEには触りますが基本的に仕事もMacです。
で、ふと気になって会社のIEで見てみたんですよ。
そしたらまぁ見事なまでにぶっ壊れてましたね。。デザインが。
ちょっといくらなんでもアレな感じなので、その内デザイン新しくしようと思いますのでもうしばらく我慢してくださいX(
コメントする