Question

在Nexus 7和HTC Android上的Chrome浏览器中，我可以看到顶部和底部div之间的1px边距。在我的Nexus 5和桌面上它不会出现。如果我使用Chrome开发工具并打开仿真模式，我可以看到白线。我可以通过添加负-1px边距和1px填充来解决问题，但是，我试图理解为什么这首先发生。

问题：任何人都可以解释为什么会发生这种情况，即使用什么CSS规则？

<!DOCTYPE html>
<html>
<head>
    <title>Test margins</title>

    <style type="text/css">
        .top {
            background-color: black;
            height: 50px;
        }

        .bottom {
            background-color: black;
            height: 50px;
            /*margin-top: -1px;*/ /* Potential fix I don't want to use. */
            /*padding-bottom: 1px;*/
        }
    </style>

</head>
<body>

<div class="top">
</div>
<div class="bottom">
</div>

</body>
</html>

Screen shot of problem

Answer 1

这不是因为这些设备上的非整数像素密度的舍入误差（1个CSS像素映射到1.25或1.33设备像素）？如果是这样，设置<meta name="viewport" content="width=640">（每个CSS像素3个FullHD设备像素或每个CSS像素2个设备像素，1280x720屏幕）应该会有所帮助。

Answer 2

尝试添加border-box

div {
    box-sizing: border-box;
    width: 50%;
    float: left;
}

Chrome中两个垂直布局的div之间的1px边距（请参阅详细信息）

2 个答案: