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

28_01_02.jpg

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


28_01_01.jpg

ソースはこんな感じ。






beta with RGS


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さん。



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」である理由は、


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


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


情報に感謝します。