CSS边框异常问题：设置1px却显示0.6px导致间隙叠加

我之前也碰到过Firefox这种亚像素渲染引发的边框精度坑，尤其是在特定版本或高DPI屏幕环境下，明明设了1px solid #3a87ad，实际渲染却变成了0.6px，多个div叠加后就攒出了讨厌的白色细线。给你几个亲测有效的解决方案：

• 用box-shadow模拟边框：border的亚像素渲染逻辑容易出偏差，换成box-shadow就能规避这个问题，而且不会影响元素尺寸计算。代码示例：

  /* 单底部边框 */
  box-shadow: 0 1px 0 0 #3a87ad;
  /* 四边完整边框 */
  box-shadow: 0 0 0 1px #3a87ad;
  

  这种方式的1px阴影会被精确渲染，不会出现非整数像素的情况，叠加后也不会有间隙。

• 触发GPU渲染强制精确像素：给元素添加硬件加速属性，让Firefox放弃亚像素插值，强制按1px渲染边框：

  .your-div-class {
    border: 1px solid #3a87ad;
    -moz-transform: scale(1);
    transform: translateZ(0);
  }
  

  注意少数场景下可能会出现轻微模糊，但大部分情况能快速解决问题。

• 用伪元素替代原生边框：把边框放到伪元素里，通过绝对定位贴合元素边缘，伪元素的渲染独立性更高，能避免主元素尺寸计算带来的亚像素误差：

  .your-div-class {
    position: relative;
    /* 保留原有样式，移除border */
  }
  .your-div-class::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid #3a87ad;
    pointer-events: none; /* 不干扰元素交互 */
  }
  

如果以上CSS方案都不适用，还可以通过JS做兼容：检测Firefox环境下的边框计算值，在计算top位置时补上差值（比如0.4px），不过这种方法比较繁琐，优先推荐CSS方案。

内容的提问来源于stack exchange，提问作者Adam Baranyai