Question

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

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

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;
}

Answer 1

this answer的修复程序为我解决了这个问题：

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

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

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

我还说“我不确定此修复是否有任何缺点”，同样的事情仍然适用，但现在已经超过一年了，+ 20 / -0票，没有负面评论，所以我觉得没问题。

浮动元素的孩子不能在Chrome / Safari中重新定位

1 个答案: