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

Answer 2

每当40％不是一个整数时，就会发生这种情况。我们假设您的页面高度为98px，因此我们得到：

40％= 39,2px
60％= 58,8px

因为我们无法绘制“半”像素，所以第一个div的高度为39px，第二个得到58px。另外，第二个是从上面画40px因为两个div不能“重叠”（记住：第一个是39.2px高度，所以我们不能开始绘制39px - 将有0.2px重叠） - 和所以我们最终得出它们之间非常奇怪的“差距”。

Answer 3

只需更改

中的最后一条规则即可

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

所以如果<html>元素的高度是奇数

则无关紧要

http://jsfiddle.net/bVxDA/4/（我改变了背景颜色以检查填充行为）

在Webkit中减少一个像素

3 个答案: