CSS设置div边框为2px，浏览器审查显示1.6px问题求助

这是高DPI屏幕或系统开启缩放时，浏览器的亚像素渲染导致的——浏览器会根据设备像素比（DPR）自动调整CSS像素对应的实际渲染像素，审查面板里显示的是转换后的CSS像素值，而不是你设置的原始值。

给你几个可行的处理方案：

• 强制元素使用清晰边缘渲染，避免亚像素调整：

  #main {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
    /* 关闭亚像素渲染 */
    image-rendering: crisp-edges;
    shape-rendering: crispEdges;
  }
  

• 临时测试的话，可以把系统缩放调回100%，此时审查面板里的边框尺寸就会准确显示为2px。
• 如果有严格的物理像素需求，可以通过JS获取设备像素比，再用calc()计算边框值，但这种方法没必要，除非是特殊场景。

其实这种差异只是浏览器的适配优化，页面实际显示的视觉效果已经对应2px的物理清晰度，大部分场景下不用特意修改。

内容的提问来源于stack exchange，提问作者Robin Mehta