1

clear: both;コンテナが使用するとき(または左/右)に、コンテナ内のフロート要素のバグに遭遇しました。Chrome(Safariではない)では、最初のfloat要素は正しく配置されますが、後続のすべての要素は親要素の上部マージンを継承しているように見え、行から外れます。

問題のあるコードは次のとおりです:http://jsfiddle.net/peterjmag/3zJey/1/

トグルリンクを試して、違いを確認してください。また、margin-toponのさまざまな値を試してください#product-listing

他のブラウザを使用している方のために、私にとってフィドルは次のようになります(Mac用のChrome 25.0.1364.160):

JSFiddle出力のスクリーンショット

clear: both;Chromeでこの動作が発生するのはなぜですか?CSS 2.1の仕様によると、clearプロパティは、対象の要素内ではなく、ドキュメントの前半に表示される浮動要素にのみ影響を与える必要があります。

(もちろん、コンテナーdivのclearプロパティを必要としない、ドキュメント内の以前の要素をクリアするためのより最適な方法が他にもあることを知っています。これが発生する理由を理解しようとしているだけです。)

4

1 に答える 1

1

これは実際には Chrome のバグのようです:問題 178134: 親要素に clear プロパティ + a top margin がある場合、浮動要素が正しくレンダリングされません。そのレポートによると、Chrome 27 以降は影響を受けません。

于 2013-03-12T21:21:22.843 に答える