正如标题中所述,我的问题是关于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>

推荐答案

事实证明,四舍五入的宽度和高度根本不能解决问题,这与浮点值无关.经过一番试验,我发现了一种诀窍.如果你设法加上right: -1pxleft: -1px,它将不再奇怪地隔开(正确的:0和1都不起作用).我用可调整大小的元素对其进行了测试.现在只要把它移回transform: translateX(-1px),它就在那里.我希望这在大多数情况下都能奏效.我将不得不在这方面进行更多的试验.

Css相关问答推荐

如何在css中从圆中切出1/n?

如何将div与图像维度进行zoom ?

不了解重复-线性-渐变 colored颜色 停止

我的css是我的react 应用程序没有按预期工作

CSS媒体查询不显示所需的输出

Astro网站在使用Astro Build构建后无法正常工作

仅 Select 嵌套 div 的底部,而不知道它们的嵌套程度

为什么删除 AnimatePresence framer.div 时会出现轻微卡顿?

带有 flex 的 CSS 空 div 以扩展并保持纵横比

使用 React 和 Flexbox 文本溢出框外

Angular 以Angular 获取当前聚焦的元素

老虎机插槽上的 CSS 对齐问题

有没有办法让它比它更敏感?

CSS 中的区域类似于 C# 区域?

将一行文本保留为单行 - 换行或不换行

如何在 CSS 中覆盖图像?

将文本放在 div 的底部

如何强制显示垂直滚动条?

我应该如何组织我的 CSS 文件的内容?

100% 高度减go 标题?