正如标题中所述,我的问题是关于Chrome的亚像素渲染.有时,您希望浏览器确定元素的适当高度或宽度,以便它占用所有可用空间.这就是浮点值的显示方式.当小数点后的数字很高时,它似乎变得不精确,并产生奇怪的间距.更改框边框属性不会更改结果.我做了一个显示问题的代码,确保使用支持亚像素渲染的浏览器.当您放大时,您可以看到边框和伪元素之间的空间.
* {
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>