如何确保1px边框在浏览器缩放时始终显示？解决hover覆盖问题

嘿，这个亚像素渲染的坑我之前也踩过！当浏览器缩放到非整数倍（比如50%）时，1px的边框会因为亚像素计算被模糊处理，导致hover背景色“渗”到边框区域，确实挺烦的。既然你不想用加额外内边距的hack，给你几个不用修改原有布局规范的优雅解法：

方案1：利用background-clip限制背景范围 #

这是最简单直接的方法，通过background-clip: padding-box让背景只在盒子的padding区域内渲染，完全避开边框层，从根源上解决背景覆盖边框的问题。

.box {
  border: 1px solid #ccc;
  background-clip: padding-box; /* 核心属性 */
}

.box:hover {
  background-color: #eee;
}

这个属性在现代浏览器里支持度拉满，完全不影响原有布局，完美适配你的场景。

方案2：用伪元素分离边框与背景 #

如果担心某些极端场景下background-clip的表现，还可以用伪元素单独模拟边框，把边框和盒子的背景彻底分开：

.box {
  position: relative;
  /* 移除原有border声明 */
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc;
  pointer-events: none; /* 避免伪元素干扰hover事件触发 */
}

.box:hover {
  background-color: #eee;
}

这种方法把边框独立成一个“外层壳”，hover背景只作用在盒子本身，自然不会覆盖边框，而且同样不需要修改原有布局的内边距。

额外说明 #

这两种方法都属于不破坏原有设计规范的优雅解决方案，不需要添加冗余的内边距或者修改DOM结构，在Chrome、Firefox等现代浏览器里都能稳定运行。

内容的提问来源于stack exchange，提问作者ey dee ey em