2009.03.20

プルダウンメニュー覚え書き その2

先日は「IE6以前のみなさんすみません」と言っておりましたが、IE7の皆さんもお見苦しくてすみませんでした。
唯今は、Safari Firefoxと同じような感じで見えております。

さて、家人の美人時計w設置PCにて確認したところ、IE7に於いてはイラストページの左マージンも消失しておった訳ですが…(marginやめてpaddingにて修正)、問題のプルダウンメニューの上部の謎の隙間が解消できておりませんでした。
liにheightを与えてやったところIE7でも同じ表示になりますた。
<li>に全部で8個の<a>が入っており、
Safari Firefoxでは、a{height:15px}とli{line-height:0}だけで問題ないのですが、
IE7ではさらに、8個×15pxをli {height: 120px}と高さ明示してやらねばならんようです。
ついでにfont-size:0pxも追加。
リストタグを使ったメニューには付きものの問題なのですなぁ、ググってすぐ解決しました。
まとめ
*ulまたはli{line-height:0}
*li{height:120px}/* IE7 高さを明示 */
*li{font-size:0px}
*li img{vertical-align:bottom}

IE6は依然として見苦しいと思いますが…すんません

コメントをどうぞ



PageTop