上の図はリストをナビゲーションメニューにして、その下にpタグで囲った画像を置いてあるシンプルなものですが、IEとFirefoxでは何かが違います。リストと画像の間のスペースです。
原因はわかっています。メニューにはfloatを使っていて、それを解除できていない為です。スペースは空いて欲しいですが、残念ながらCSSの解釈的にはIEが間違っている話になります。しかし、メニュー下部のpタグにcssのclearプロパティで回り込みを解除しても、解決しません。
調べた結果、下記のコードで解決できる事がわかりました。
ul:after{
content: “”;
clear: both;
display: block;
}
「:after」擬似要素でul要素の後に回り込み解除用の要素を挿入している模様。実質親要素(ul)で回り込み解除しているのかな。何故ul直後のpタグで解除できないのかよくわからない。
結果こうなりました。IEには影響なし！
関連する記事はありません。
タグ: CSS_Tips
