Html 两个垂直布置的镀铬div之间有1px的边距（请阅读详细信息）

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

---

问题：有人能解释为什么会发生这种情况，即使用了什么CSS规则吗？

---

测试边距
.顶{
背景色：黑色；
高度：50px；
}
.底部{
背景色：黑色；
高度：50px；
/*页边距顶部：-1px；*//*我不想使用的潜在修复程序*/
/*垫底：1px*/
}

---

尝试添加边框框

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

---

这不是因为这些设备上的非整数像素密度的舍入误差（1个CSS像素映射到1.25或1.33个设备像素）？如果是这样，设置类似

（对于1280x720屏幕，每CSS像素3个全高清设备像素或每CSS像素2个设备像素）应该会有所帮助。

这很可能是困扰移动浏览器的许多渲染怪癖之一。等等-“如果我使用Chrome开发工具并打开模拟模式”我并不完全熟悉Chrome的开发工具，但这是在桌面上吗？如果是，具体模拟了什么？如果是模拟的设备，则我的原始注释适用。否则，我什么都没有。可能是一个怪癖，但我正在寻找解释为什么会发生这种情况。谢谢你的变通办法，但我正在寻找解释为什么会发生这种情况，正如最初问题中所问。这不是变通办法。它是DOM-box模型。如果您想查看规格，请阅读盒子模型。虽然没有解决它，但它帮助我解决了另一个问题，谢谢。

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