html - Webkit 中一个像素的百分比

Question

我有两个 div 元素，最上面的元素的高度为 40%，另一个为 60%。在我的示例中，我将第一个定位到 top: 0;，将第二个定位到 bottom: 0;。我的问题是有时我在 Webkit 中它们之间的距离为 1px!

我创建了一个 jsFiddle 来重现 Webkit 中的问题(Safari 和 Chrome，但在 Firefox 中工作正常。)

http://jsfiddle.net/bVxDA/ (调整窗口大小以查看运行中的错误)

这是我正在使用的代码。

HTML

<div id="cover-top"></div>
<div id="cover-bottom"></div>​

CSS

html, body {
    background: red;
    height: 100%;
}

#cover-top,
#cover-bottom {
    background: #000;
    position: absolute;
    width: 100%;
}

#cover-top {
    height: 40%;
    top: 0;
}

#cover-bottom {
    height: 60%;
    bottom: 0;
}

我会接受使用 JavaScript 或 jQuery 的解决方案。

Answer 1

如果 html, body 的高度是奇数，则有一个 1px 的行“余数”。

Webkit 无法划分 1px 并且不尝试。

参见:http://jsfiddle.net/iambriansreed/gPu3Y/

如果您设置以下内容，您可以使 1px 线消失:

#cover-bottom {
    height: auto;
    top: 40%;
    bottom: 0;
}