如何禁用sub-pixel rendering或强制浏览器将属性取整至最近像素？

问题描述 #

当依赖浏览器自动计算元素宽高以填满可用空间时，常会产生浮点数值的尺寸。当小数部分数值较大时，会出现精度问题——比如元素边框与内部伪元素之间出现异常间隙，即便设置box-sizing: border-box也无法解决。

问题演示代码 #

CSS #

* {
  box-sizing: border-box;
}

div {
  position: relative;
  
  width: 100.98px;
  height: 100px;
  
  margin-left: 2px;
  
  background-color: aqua;
  border-radius: 10px;
  border: solid 1px #000;
}

div:after {
  position: absolute;
  content:'';
  
  width: 15px;
  height: 100%;
  
  right: 0;
  
  background-color: black;
}

HTML #

<div></div>

在支持亚像素渲染的浏览器中放大页面，可看到父元素边框与右侧黑色伪元素之间存在明显间隙。

问题原因 #

Chrome的亚像素渲染机制在处理带小数的元素尺寸时，会对元素的实际渲染位置或尺寸进行取整近似计算，导致绝对定位的伪元素无法完全贴合父元素的边缘，进而出现视觉间隙。box-sizing: border-box仅能控制盒模型的计算方式，无法解决这种底层渲染的精度偏差。

解决方案 #

方案1：调整伪元素定位逻辑 #

使用calc()明确计算伪元素的左侧位置，替代right: 0，让定位计算更精准：

div:after {
  position: absolute;
  content:'';
  width: 15px;
  height: 100%;
  left: calc(100% - 15px); /* 精准计算左侧偏移量 */
  top: 0;
  background-color: black;
}

方案2：使用整数尺寸 #

若业务场景允许，将父元素的宽度调整为整数，从根源上避免亚像素计算误差：

div {
  width: 101px; /* 替换原100.98px的浮点尺寸 */
}

方案3：触发GPU加速优化渲染 #

通过触发GPU渲染，提升亚像素计算的精度，减少视觉间隙：

div, div:after {
  will-change: transform;
  transform: translateZ(0);
}

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