0

重複の可能性：
Firefoxのボディマージンのバグ？

以前は垂直方向のパディングの問題に悩まされていましたが、解決したときにすべて理解できたと思いました。しかし、再び、私は立ち往生しています...

私はいくつかの既存のテーマを試して、それらがどのように機能するかを確認していますが、両方ともWin7でFirefox17とGoogleChrome23の間に大きな不一致があるという問題が発生しています。

以下の小さなスニペットにコードを絞り込みました。（スペースを節約するためにいくつかのスタイルをインライン化しました）。

<!DOCTYPE html >
<head>
    <style type="text/css">
        .container:after{
            content: "\0020";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
  <div class="container" style="background:#0f0;">
    <div style="float: left;" >Words</div>
  </div>
  <div style="background:#f00; margin-top: 100px;">Words</div>
</body>
</html>

上記をGoogleChrome（またはIE 8）で試してみると、期待どおりに動作します。最初のトップレベルのdivはページの上部にあり、2番目のトップレベルのdivはその下にあり、マージントップスタイルのために間隔が空けられています。

ただし、Firefoxで試してみると、最初のdivがページの下に配置されています。これは、2番目のdivのmargin-topパラメーターに直接関係しています。値を大きくすると<body>、スタイルが変更されていなくても、要素全体の上部マージンの間隔が大きくなります。

これで、:afterとcontent: "\0020"パーツがの一部であることがわかりました。クリアフィックスとフロートclearfixが100％把握されていないことは認めますが、上記のコードは2つの主要なブラウザーで非常に異なる動作をすることに混乱しています。

誰かが私がここで欠けているものと、なぜ行動が異なるのかについて私に教えてもらえますか？

編集：BoltClockが指摘しているように、これは長年の（FF2以降の）FireFoxバグの複製のようです-

4

2 に答える 2

1

違いがある理由を実際に説明することはできませんが、これを理解するのに役立つ可能性のある修正を提供できます。overflow:hidden;フロートのコンテナに追加します。

<div class="container" style="background:#0f0; overflow: hidden;">

これは

.container:after{
            content: "\0020";
            display: block;
            clear: both;
            overflow: hidden;
}

http://jsfiddle.net/g3Avj/1/

于 2012-11-29T18:33:41.460 に答える
0

最も簡単な解決策は、divに残っているフロートを単語で削除することですが、これをどこに使用するかはわかりません。左揃えのままで、必要ありません。

于 2012-11-29T18:35:12.963 に答える