呈现大小与CSS声明不匹配的HTML元素

我试图理解为什么我的HTML元素呈现的大小与CSS指定的大小不匹配。例如，我的CSS中有以下声明：

.productselectorslist > div { border-bottom-width: 1px;}

但是，当我在浏览器开发工具中查看元素时，当元素在Google Chrome中呈现时，它显示：

border-bottom-width: 1.1111111640930176px;

这种大小差异在渲染代码中无处不在。似乎只有当我开始包含边框时，它才会在DOM中启动。一旦发生这种情况，几乎每个元素都有不寻常的大小，与我在CSS中指定的大小不匹配

---

如何将所有大小都固定为整数？

虽然我想不出边界呈现不同大小的原因，但解决此问题的一种方法是给出一个！代码末尾的重要信息

现在这是一个解决办法，绝不是理想的，它可能只是暂时解决你的问题

div#test{
border-bottom-width: 1.1111111640930176px !important;
}

---

当你缩小到90%时就会发生这种情况

---

当逻辑像素小于整个像素时，边界仍作为整个像素进行渲染。样式被调整为1/0.90=1.111111，以便在缩小比例时成为一个完整的像素。

您什么时候得到的印象是，通过浏览器查看的任何内容都有整数大小的像素？欢迎来到现实世界，在现实世界中，浏览器、缩放级别和每英寸像素变化很大：