29

我在最新版本的 Chrome (25.0.1364.97 m) 中遇到了一个奇怪的问题。我在一个浮动的、已清除的容器内有一组 div，它们都以相同的宽度向左浮动。

在 Firefox、IE 和旧版本的 Chrome 中，所有框并排放置，但在最新版本的 Chrome 中，第一个 div 位于其他 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 中的错误吗？

编辑：我知道这可以通过将填充应用于#wrapper 元素而不是 margin-top 来解决，但我们管理着大约 140 个站点，因此去更改每个站点的 CSS 是不切实际的

编辑2：我想我需要澄清我的问题。我不是在问如何解决这个问题。我已经知道了。我想知道为什么会发生这种行为？为什么渲染引擎会这样渲染标记/css？这是正确的行为吗？

4

7 回答 7

13

这似乎是一个错误。clear在包装元素上应用时会出现问题。当您删除 时clear，错误就消失了。

根据有关该属性的W3C 规范：clear

此属性指示元素框的哪些边可能不与较早的浮动框相邻。'clear' 属性不考虑元素本身或其他块格式上下文中的浮动。

所以它不应该影响孩子的漂浮行为。我在 Chrome 上提交了关于此问题的错误报告。

更新：从评论中的链接，kjtocool在 2013 年 3月 30 日提到：

看来此问题已在版本 26.0.1410.43 中得到纠正

于 2013-03-08T10:02:36.893 回答
6

你为什么不使用

display: inline-block;

而不是float: left.box？

于 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

试试这个：

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

从#wrapper 中删除 clear:both 如果您仍然遇到问题，请在最后一个 div 之后应用 clear:both

于 2013-03-07T06:13:32.543 回答
0

删除 clear:both;float:left; 形成#wrapper

当你想要 div nex raw 时，clear:both 是必需的。

于 2013-03-08T10:14:24.897 回答