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

【问题标题】：1px margin between two vertically laid out divs in Chrome (please read details)Chrome 中两个垂直布局的 div 之间的 1px 边距（请阅读详细信息）
【发布时间】：2014-10-12 20:04:49
【问题描述】：

在 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>

【问题讨论】：

这很可能是困扰移动浏览器的众多渲染怪癖之一。
等待 - “如果我使用 Chrome 开发工具并打开模拟模式”我并不完全熟悉 Chrome 的开发工具，但它在桌面上，如果是，具体模拟的是什么？如果是模拟的设备，那么我的原始评论适用。否则，我一无所获。
也许是个怪癖，但我正在寻找关于为什么会发生这种情况的解释。

标签： html google-chrome margin

【解决方案1】：

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

【讨论】：

没有解决，但它帮助我解决了另一个问题，谢谢。

【解决方案2】：

尝试添加边框

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

【讨论】：

感谢您的解决方法，但我正在寻找解释为什么会发生这种情况，如原始问题中所要求的那样。
这不是解决方法。它是 DOM 盒模型。如果您想查看规格，请阅读盒子模型。