29

最新バージョンの Chrome (25.0.1364.97 m) で奇妙な問題が発生しています。フロートされ、クリアされたコンテナー内に一連の div があり、すべて同じ幅で左にフロートされています。

Firefox、IE、および以前のバージョンの Chrome では、すべてのボックスが本来のように並んでいますが、最新バージョンの Chrome では、次のように最初の div が他のものの上にあります。

ここに画像の説明を入力

ウィンドウが最大化され、最初の読み込み時にのみ発生するようです。ページを更新すると、それ自体が整理されますが、Ctrl + F5 でハード更新を行うと、再び発生します

HTML:

<div id="top">
    <h1>Words</h1>
</div>
<div id="wrapper">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

CSS:

#wrapper {clear:both;float:left;margin-top:20px;width:500px}
.box {float:left;width:100px;border:1px solid #000;margin-right:20px}

ここでフィドルを作成しました：http://jsfiddle.net/GZHWR/3/

これは最新の Chrome のバグですか?

編集: margin-top の代わりに #wrapper 要素にパディングを適用することでこれを解決できることはわかっていますが、約 140 のサイトを管理しているため、すべてのサイトで CSS を変更するのは現実的ではありません。

編集2:質問を明確にする必要があると思います。問題を解決する方法を尋ねているわけではありません。私はすでにそれを知っています。この動作が発生する理由を知りたいですか? レンダリング エンジンがマークアップ/CSS をこのようにレンダリングするのはなぜですか? それは正しい行動ですか？

4

7 に答える 7

13

バグのようです。clearラッパー要素に適用すると問題が発生します。を削除するclearと、バグはなくなります。

プロパティに関するW3C仕様によると：clear

このプロパティは、要素のボックスのどの辺が以前のフローティング ボックスに隣接していない可能性があるかを示します。'clear' プロパティは、要素自体または他のブロック フォーマット コンテキスト内のフロートを考慮しません。

したがって、子供の浮遊行動に影響を与えるべきではありません。この問題について Chrome にバグレポートを提出しました。

更新: 2013 年 3 月 30 日にkjtocoolが言及したコメントのリンクから:

この問題は、バージョン 26.0.1410.43 で修正されているようです。

于 2013-03-08T10:02:36.893 に答える
6

使わない理由

display: inline-block;

.boxの代わりにfloat: left？

于 2013-03-01T12:03:09.737 に答える
4

試す ：

#wrapper {
  display:inline;
}
.box{
  vertical-align:top;
}

「いいね」ツールバーで同じ問題が発生しましたが、このコードの後、機能します。

于 2013-03-06T08:49:21.123 に答える
0

はいから削除clear:bothします。#wrapper

http://jsfiddle.net/GZHWR/20/

于 2013-03-06T09:43:12.200 に答える
0

#wrapper から clear:both を削除し、それでも問題が発生する場合は、最後の div の後に clear:both を適用します

于 2013-03-07T06:13:32.543 に答える
0

これを試して：

CSS:

   .clearfix {
      *zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      line-height: 0;
      content: "";
    }

    .clearfix:after {
      clear: both;
    }

html:

<div id="wrapper" class="clearfix">
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
    <div class="box">Words</div>
</div>

削除する

clear:both;

#wrapper から

于 2013-03-07T02:48:14.250 に答える
0

clear:both;float:left; を削除します。フォーム #ラッパー

clear:both は、div nex raw が必要な場合に必要です。

于 2013-03-08T10:14:24.897 に答える