28_01_02.jpg


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


28_01_01.jpg


ソースはこんな感じ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<link href="./css/base.css" rel="stylesheet" />
<title>beta with RGS</title>
</head>
<body>
<div id="content" class="container row">
  <section id="content_wrap" class="span_24">
    <article class="col span_18 clr">
    Insert page content here.
    </article>
    <nav class="col span_6 clr">
    Insert sidebar stuff here.
    </nav>
  </section>
</div>
</body>
</html>

どうやら「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を設定していなかったからでした。そうかそうか。


情報に感謝します。