firefoxで上下に意図しない隙間ができるclearfix問題

サイトをコーディングしていると、たまにFirefoxだけ意図しない隙間が上下にできる事があります。（主に上に隙間ができます）

Firebugで見てみると、marginでもpaddingでもなくcssでは確認できない空白があります。

どういった状況で隙間ができるのか

htmlやcssのソースを変更したり試していると、どうやらclearfixが悪さをしている様子。
clearfixとは、フロートしたコンテンツの親要素の高さを保つために使うcssのテクニックです。clearfixの記述は様々な方法が確認されていますが、今回使っていた記述は以下です。

.clearfix {
    zoom:1;
}
.clearfix:after {
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility:hidden;
}

では対処方法を見てみます。

この方法が一番スマートです。

制作するサイトが古いブラウザを対象にしていないのであれば以下の記事の「micro clearfix」や「micro clearfix よりも、もっとコンパクトな clearfix」
を使うと良いと思います。

以下ソース引用です

.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

私は今回、micro clearfixで対応しました。Firefoxで不明な隙間がバッチリなくなりました。

しかし、どうしてもcssにあまり変更を加えたくない、clearfixはよくわからないのであまり触りたくない、という場合は以下の方法を試してみてください。

記述の変更はほんの少し。以下のように変更します。

.clearfix {
     zoom:1;
}
.clearfix:after {
     content:".";
     display: block;
     clear: both;
     height: 0;
     visibility:hidden;
}

問題点
この方法でもFirefoxで隙間はなくなるのですが、サイト最下部に1行分ほどの隙間ができてしまいます。
特にフッターの背景色とbodyの背景色が異なる場合はあからさまに1行隙間があいているので見た目がよろしくありません。今でもたまにそういうサイトをみかけます。

フロートコンテンツの親要素の高さを保つにはclearfixの代わりにoverflow: hidden;を親要素のボックスに記述する方法でも対処できます。

問題点
こちらも若干問題がありまして、どんなコンテンツにでも使えるわけではありません。
フロートコンテンツにcssでbox-shadowをつけている場合、シャドウの上下が切れてしまいます。

overflowを使うと上下のシャドウが切れる

overflow:hidden;の場合、はみ出た部分を隠すので親要素からはみ出ている上下のシャドウはもちろん隠れてしまいます。clearfixの代わりにoverflow:hidden;を多用してる人はbox-shadowを使う場合、要注意です。

clearfixを使うと上下のシャドウは切れない

clearfixの場合、フロートコンテンツの親要素をはみ出してもシャドウは表示されます。box-shadowを使う場合はclearfixが良いです。

フロートコンテンツの親要素にpaddingの上下どちらかに1px以上指定することでも上下の謎の隙間が消えてくれます。

問題点
無駄な記述がふえてしまいます。わずか1pxでもpaddingが増えてしまうので見た目にも影響がでてしまいます。
デザイン上で大丈夫なようであればこの方法も使うことが可能です。

長々と書きましたが、やはり方法１が一番のおすすめです。
目の前の作業ばかりしているとテンプレートに気が行かなくなっていつの間にか技術が古くなってしまいます。

たまには普段使っているテンプレートも見直さないといかんですね。

最後に、気になるCSSの書籍。自分のCSS知識も結構古くなってる気がします。いろいろ見直したい。