Html CSS上重叠元素上的边框仍然可见

我正在尝试调整两个div的内部位置。 外隔高100mm，内隔高80mm，轮廓10mm。但结果是，我在innerdiv之外的一个非常小的区域上看到了OuterDiv的背景色

我试图找出为什么内部分区不能覆盖整个区域

身体{ 背景色：DDDD； 宽度：100%； 身高：100%； 保证金：0； 填充：0； } 欧特尔迪夫先生{ 宽度：100mm； 高度：100mm； 填充：10mm；/*VAR1*/ 边缘：10mm自动； 背景：红色； 长方体阴影：0.5pxRGBA0,0,0,0.1； } .innerdiv{ 高度：80毫米； 外形：10mm FFAEA实心；/*VAR1*/ 背景：b3d4fc； } * { -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } 这是一篇课文。

---

如果您搜索并替换mm并将其替换为px，则会正确显示。粗略地说，这是因为当内容被绘制到屏幕上时，它被转换为像素并相应地渲染。听起来不错，但问题是像素大小取决于设备的dpi。而且没有办法涵盖各个设备屏幕的所有不同dpi。因此，没有一个稳定的公式可以可靠地将mm扩展到px，并使其在所有设备上看起来一致，因为javascript没有考虑dpi。重叠很可能是因为像素大小取决于屏幕分辨率

---

最好只在硬css中使用像素。缩放之前的单位，否则您无法确定它在不同屏幕dpi上的渲染方式。

亚像素渲染和舍入。mm将被转换为px，并且将有很多浮点值。检查代码以注意这一点。调整浏览器的缩放级别以查看不同的行为如果要使innerdiv覆盖整个尺寸，为什么要将其缩小？这使我困惑。