html - css clearfix の動作は、Firefox と Chrome で同じではありません

Question

計算された幅が 0 であるが、幅 x のコンテンツを含む div の css clearfix にこのクラスを使用しています。

.clearfix {
 *zoom: 1;
 &:before,
 &:after {
   display: table;
   content: "";
 }
 &:after {
   clear: both;
 }
}

何が起こっているのかというと、このクラスを使用した後のクロムでは、div がそのコンテンツの幅を取ります。しかし、 firefoxでは、div はその親の幅を取ります。

div が両方のブラウザでそのコンテンツの幅を取るという動作であってはなりませんか? 何が問題になる可能性がありますか?

score 2 · Accepted Answer

他のスタイルに干渉しない場合はoverflow: hidden;、フローティングコンテンツなどのためにコンテナーを強制的に展開するために使用できます。

この jsFiddle を参照してください: http://jsfiddle.net/mBSCj/は、すべての主要なブラウザーで動作します。

score 1 · Accepted Answer

追加のマークアップを使用せずにフロートをクリアする方法がもう 1 つあります。これは、マイクロクリアフィックスよりもかなり前のことです。

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

2 に答える 2