2

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

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

1 回答 1

1

这个答案的修复为我修复了它：

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

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

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

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

于 2013-08-22T23:10:01.487 回答