サイトをコーディングしていると、たまに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;
}
では対処方法を見てみます。
方法1 clearfixを新しくする。
この方法が一番スマートです。
制作するサイトが古いブラウザを対象にしていないのであれば以下の記事の「micro clearfix」や「micro clearfix よりも、もっとコンパクトな clearfix」
を使うと良いと思います。
・floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17
以下ソース引用です
.cf:before,
.cf:after {
content: " ";
display: table;
}.cf:after {
clear: both;
}.cf {
*zoom: 1;
}
私は今回、micro clearfixで対応しました。Firefoxで不明な隙間がバッチリなくなりました。
しかし、どうしてもcssにあまり変更を加えたくない、clearfixはよくわからないのであまり触りたくない、という場合は以下の方法を試してみてください。
方法2 contentにドットを入れる
記述の変更はほんの少し。以下のように変更します。
.clearfix {
zoom:1;
}
.clearfix:after {
content:".";
display: block;
clear: both;
height: 0;
visibility:hidden;
}
問題点
この方法でもFirefoxで隙間はなくなるのですが、サイト最下部に1行分ほどの隙間ができてしまいます。
特にフッターの背景色とbodyの背景色が異なる場合はあからさまに1行隙間があいているので見た目がよろしくありません。今でもたまにそういうサイトをみかけます。
方法3 clearfixの代わりにoverflow: hidden;を使う
フロートコンテンツの親要素の高さを保つにはclearfixの代わりにoverflow: hidden;を親要素のボックスに記述する方法でも対処できます。
問題点
こちらも若干問題がありまして、どんなコンテンツにでも使えるわけではありません。
フロートコンテンツにcssでbox-shadowをつけている場合、シャドウの上下が切れてしまいます。
overflow:hidden;の場合、はみ出た部分を隠すので親要素からはみ出ている上下のシャドウはもちろん隠れてしまいます。clearfixの代わりにoverflow:hidden;を多用してる人はbox-shadowを使う場合、要注意です。
clearfixの場合、フロートコンテンツの親要素をはみ出してもシャドウは表示されます。box-shadowを使う場合はclearfixが良いです。
方法4 上下のどちらかにpaddingをつける
フロートコンテンツの親要素にpaddingの上下どちらかに1px以上指定することでも上下の謎の隙間が消えてくれます。
問題点
無駄な記述がふえてしまいます。わずか1pxでもpaddingが増えてしまうので見た目にも影響がでてしまいます。
デザイン上で大丈夫なようであればこの方法も使うことが可能です。
長々と書きましたが、やはり方法1が一番のおすすめです。
目の前の作業ばかりしているとテンプレートに気が行かなくなっていつの間にか技術が古くなってしまいます。
たまには普段使っているテンプレートも見直さないといかんですね。
最後に、気になるCSSの書籍。自分のCSS知識も結構古くなってる気がします。いろいろ見直したい。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレスジャパン
- 発売日: 2014/07/24
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る