Abnormal/unwanted 页边距 HTML 页

Question

我有一小块 html，它表现出一些有趣的行为。

<div style="position:relative; width:100px; height:25px; border:2px solid grey; background: rgb(205, 234, 238);">
   <div style="position:absolute; left:0; top:0; width:80%; height:100%; background: rgb(9, 201, 95);"> 
   </div>
</div>

您可以看到内部绿色框左侧和底部的小边距。从代码中可以清楚地看出，我将左侧设置为 0，将高度设置为 100%。我知道重置样式，我正在使用下面的简单 CSS

*{ border:0;padding:0;margin:0;outline:0;box-sizing: border-box;font-family: roboto;}

我还尝试了 W3schools 在线编辑器中的代码块，只是为了仔细检查输出，但问题仍然存在。另一个有趣的行为是，有时当我用 CSS 进行实验时，绿色框的顶部会出现一个间隙，而底部的间隙会消失。

知道这里发生了什么吗？

根据答案进行一些测试后更新

Chrome 90.0
我验证了缩放级别都是正常的。我尝试更改缩放级别，间隙在 50%、80%、125%、175%、200% 等处消失，但在正常视图中问题仍然存在。

边缘 88.0
与 chrome 完全相同的行为（间隙在完全相同的缩放级别消失）

火狐 88.0
我只是运行 firefox 中的代码，问题并没有出现在那里。即使我更改缩放级别，在 firefox

中也没有问题

所以问题似乎出现在 Chrome 和边缘。
这个问题有什么解决办法吗？

Answer 1

这与缩放无关，但在不同的缩放级别下该现象会变得明显。

问题在于系统必须对百分比和像素进行的运算，以及在可能出现四舍五入时该怎么做。 CSS 像素通常在现代高清显示器上呈现为像素的倍数，因此当它面对部分像素时，它可以留下一个显示像素。

问题中给出的情况的一个解决方法是将背景全部放在父元素中（作为线性渐变）：

<div style="position:relative; width:100px; height:25px; border:2px solid grey; background-image: linear-gradient(to right, rgb(9, 201, 95) 0%, rgb(9, 201, 95) 80%, rgb(205, 234, 238) 80%, rgb(205, 234, 238) 100%)">
  <div style=" width: 80%; height: 100%;">
  </div>
</div>

Abnormal/unwanted 页边距 HTML 页

Abnormal/unwanted margin in HTML page

html

css

css-position