2010年4月アーカイブ

HTMLで画像を指定したメニューをfloatで横並びにしたくて、実際に以下の記事を参考にCSSでロールオーバーメニューを作っていたときの事です。

なぜか、画像の下に余白が開いてしまうことに気づきました。参考元の以下の記事では、そんなことが起こってはいませんでした。

これから推測するに、真っ先に思いついたのが、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;
}

を指定します。

英語のサイトで恐縮ですが、HTML5とCSS3の実装状況をまとめたサイトがありましたので紹介します。これをみると、SafariやFirefoxが優秀で、IEは最新版の8でも、実装が追いていないのがわかります。IEのシェアは日本では大きいのでもう少し頑張っていただきたい事ですね。

ブラウザ別HTML5、CSS3実装状況

マルチカラム構造にしたときなど、ブロック要素の回り込みを解除するのに、Clearfixと呼ばれるテクニックを使用するのが便利です。ブラウザの移り変わりにより、動作対象とする古いブラウザを考慮しなくなってもよくなってきたこの頃ですので、Clearfixのソースコードも以下のようにここまでスリムになりました。

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。「/zoom:1;」のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に「overflow:hidden」を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は「overflow:auto;」などとしておけばよいので、結構使える技ではあります。

参考