web-dev-qa-db-ja.com

GoogleのCSSフローティングバグChrome

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

Firefox、IE、および古いバージョンのChromeすべてのボックスは想定どおりに並んでいますが、最新バージョンのChrome最初のdivのように他のものの上にあります：

enter image description here

ウィンドウが最大化され、最初のロード時にのみ発生するようです。ページを更新するとそれは自動的に整理されますが、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のバグですか？

編集：これはマージントップの代わりに#wrapper要素にパディングを適用することで解決できることを知っていますが、約140のサイトを管理しているため、すべてのサイトでCSSを変更することは実用的ではありません

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

cssgoogle-chromecss-float
29
Andy

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

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

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

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

更新：コメント内のリンクから、kjtocool30-03-2013に言及：

この問題はバージョン26.0.1410.43で修正されたようです

13
Justus Romijn

使ってみませんか

display: inline-block;

の代わりに float: left for .box？

6
Sergio

試してください：

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

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

2
Francois Borgies

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

0
Nomaan

Clear：both; float：left;を削除します。フォーム#wrapper

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

0
dsfg

これを試して：

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から

0
Hdude74

削除する clear:both from #wrapperはい、動作します。........

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

0
Rahul Shah