浮动元素的子元素未在 Chrome/Safari 中重新定位答案

【问题标题】：Children of Floated Elements Not Re-Positioning in Chrome/Safari浮动元素的子元素未在 Chrome/Safari 中重新定位
【发布时间】：2013-08-22 22:53:01
【问题描述】：

我有一个页面，其中的一些元素从页面右侧底部开始流动，我在 chrome 和 safari 中遇到了一个奇怪的问题，浮动元素的子级在删除一些浮动元素后没有重新定位。

在 OSX 上，它似乎在 Firefox 和 Opera 中运行良好，但 Chrome 和 Safari 只重新定位浮动元素，而不是子元素。在检查器中切换某些属性会重置它，所以它可能是一个渲染错误。是什么原因造成的和/或我该如何避免？

See this example fiddle.

html:

<div id="container">
    <div class="float"> // when this is removed...
        <div class="box"></div>
    </div>
    <div class="float"> 
        <div class="box"></div> // ...these stay in the same spot
    </div>
    <div class="float">
        <div class="box"></div> // ...these stay in the same spot
    </div>
</div>

css:

#container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.float {
    width: 100px;
    float: right;
    height: 100%;
    margin-right: 1em;
}
.box {
    width: 100px;
    bottom: 0;
    height: 100px;
    position: absolute;
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

this answer 的修复为我修复了它：

.float {
    -webkit-transform: scale3d(1,1,1);
}

http://jsfiddle.net/thirtydot/GYFqU/3/

与我在那个答案中所说的类似，这似乎也是一个 WebKit 渲染错误。

我还说“我不确定这个修复是否有任何缺点”，同样的事情仍然适用，但这个答案现在已经有一年多了，有 +20/-0 票，没有负面的 cmets，所以我想这很好。

【讨论】：