リストをfloatで横並びにする際、画像の下に余白が空く
HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。
アクセシビリティの高いCSSロールオーバーメニュー - CSSデザインノート
なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。
ピュアCSSで実装するDKIRを応用した画像ボタンのロールオーバー効果 | CSS-EBLOG
これから推測するに、真っ先に思いついたのが、DOCTYPE宣言の違い。私は、｢xhtml1-transitional.dtd｣だったのですが、CSS-EBLOGさんのデモページでは｢xhtml1-strict.dtd｣でした。
試しにxhtml1-strict.dtdにしてみると、下の隙間は空きませんでした。
(X)HTMLコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">ただ、それだけのためにDOCTYPE宣言を変えるのは他にも影響が出そうでなかなか難しいですよね。
画像の下に余白が空いていたのですが、それがulの領域が広がっていたためというのが、FirofoxのWeb Developerを使ってわかったので、単純に思いつくのが、｢line-height｣が悪さをしているのではないかということ。ulかliに｢line-height:0;｣というように、値を0にすると、隙間が空かなくなりました。
CSSコード
ul {
line-height:0;
}あるいは
CSSコード
li {
line-height:0;
}逆に、DOCTYPE宣言が｢xhtml1-strict.dtd｣で、ulかliに｢line-height:0;｣を指定してしまうと、余白が空いてしまうようです。どうしてこのようなことが起こるのかよくわかりません。
ちなみに｢xhtml1-transitional.dtd｣で余白が空いてしまうのは、Firefox、Google Chome、Safari(Windows XP）でした。｢xhtml1-strict.dtd｣でulかliに｢line-height:0;｣でレイアウトが崩れてしまうのが、Firefox、Operaでした。
IE6と7は特に不具合は起こりませんでしたが、IE8だけは｢xhtml1-transitional.dtd｣かつ｢line-height:0;｣を指定すると余白は消えましたが、｢xhtml1-strict.dtd｣だけでは余白は消えず、｢xhtml1-strict.dtd｣かつ｢line-height:0;｣をすると、余白は消えました。謎ですね。
要約すると、隙間を空けないようにするには、DOCTYPE宣言を
(X)HTMLコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">にして、CSSにて、
CSSコード
ul {
line-height:0;
}あるいは
CSSコード
li {
line-height:0;
}を指定します。
