「Responsive Grid System」使ったらFirefoxで表示が乱れた→clearfixの問題

上のようになって欲しいのに、こうなってしまう。




ソースはこんな感じ。

Insert page content here.

どうやら「row」クラスに設定されている「margin-bottom:20px」がなぜか上側にも反映されているらしい。問題が起きるのはFirefoxだけで、IE9、Chromeでは全く問題なく表示されました。
（Safariはしらん）

結論：clearfixのheightを0.01pxに変更する

clearfixで設定されている「height: 0」が拙いらしい。情報はこちらから。

firefoxでmargin-bottomがmargin-top | 乱雑モックアップ

解決策を示してくれたのはhail2uさん。

@makoto69 http://j.mp/dUeCOu は height: 0.01px; にすると回避できるですよ http://j.mp/hl1k2K

— がまなしうきょさん (@hail2u_) 3月 20, 2011

Responsive Grid Systemの場合、クラス「row」「clr」「group」にclearfixの設定がされていて、以下のようなCSSが書かれています。

.row:after,
.clr:after,
.group:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

この中の「height: 0;」を「height: 0.01px;」に変更します。
これで意図した通りに表示されるようになりました。


なぜこの問題が起きるのか、なぜこれで解決するのかはよく解りませんが、設定値が「0.01px」である理由は、

@hell2u たしか 1px にしちゃうとレイアウトに影響が出るので数値を小さくしていった結果、レイアウトに影響せず clear できてかつキリのいいのが 0.01px だった気がします。

— Takeru Suzukiさん (@terkel) 2月 5, 2011

ということのようです。なるほど。


話題になっているのがFirefox 3.xの頃なのでかなり古くからある問題（というか仕様？僕が知らなかっただけ…）のようですが、初めて遭遇しました。なんで今まで遭遇しなかったんだろうと思ったらば、今まで使ってたclearfixではheightを設定していなかったからでした。そうかそうか。


情報に感謝します。