如何禁用子像素渲染或强制浏览器将属性舍入到最近的像素？

Question

我的问题如标题所述是关于chrome的子像素渲染的。有时您希望浏览器确定元素的正确高度或宽度，以便它占用所有可用空间。这就是浮点值的显示方式。当小数点后的数字很高时，它似乎会变得不精确并产生奇怪的间距。更改 box-border 属性不会改变结果。我制作了一个代码笔来显示问题，请确保使用支持子像素渲染的浏览器。当您放大时，您可以看到边框和伪元素之间有一个空间。

* {
  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;
}

<div>

Answer 1

事实证明，对宽度和高度进行四舍五入根本不能解决问题；这与浮点值无关（可能是一个因素）。经过一番实验，我发现了一个窍门。如果你设法在元素的样式中添加

right: -1px

或

left: -1px

，它将不再出现奇怪的间隔（右：0 或 1 不起作用）。我用可调整大小的元素对其进行了测试。您可以使用

transform: translateX(-1px)

将其移回原来的位置，然后就可以了。元素之间不再有子像素间隙。我制作了一个 codepen 来展示解决方案：https://codepen.io/m4tex-the-sassster/pen/zYaMdwv

Answer 2

我发现，如果您使用的是 wordpress 之类的东西并且图像位于图形包装器中，则执行

transform: scale(1.005);

足以将其四舍五入