最近htmlとcssばっかり書いてるまいです。
ruby?なにそれおいしいの？状態…

そんな最近作業をしてて、先日書いた「clearfixでfloat解除」のclearfixでは
Firefox3でちょっとおかしなことになってしまったので、
さらに手を加えてみました。

つべこべ言っても仕方ないのでとりあえずご紹介。

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
    visibility: hidden;
}
.clearfix { display: inline-block; }
.clearfix { display: block; }

前のだと何がどうなるかというと、footerとかにclearfixを適用させたとき、
一行分の空白が直下に挿入されてしまって…。
overfllow:hidden;を入れてみてもダメだし、どうしたものかといろいろ試した結果、
font-size:0;が効きました。

おまけで
.clearfix { display: block; }
も追加して、これでだいたいのブラウザは大丈夫…なはず。

コメント (0)  |トラックバック (0)