相同 CSS，相同页面，不同呈现

Question

谁能解释造成如下所示差异的原因？

在底部面板中，彩条渲染得比顶部面板更粗。

两者的CSS相同；

.colored-bar {
    width: 100%;
    height: 2px;
}

浏览器：Chrome84

请在此处查看实时重现：CodePen

我在 CodePen 中看到的；

Answer 1

可能您在浏览器中打开了放大功能。禁用它，一切都应该是正确的。

125% 放大显示与您的屏幕截图完全相同的问题。

更新 1：

此外，如果我直接在 Windows 屏幕设置中将缩放比例设置为 125%，问题就会出现。

更新 2：

我可能找到了可行的解决方案。只需使用伪元素而不是普通伪元素，一切似乎都运行良好，但我没有进行广泛的测试。

.kpi {
  border: 1px solid black;
  height: 56px;
  width: 175px;
  padding: 10px;
}

.box {
  display: flex;
  flex-direction: column;
  
  width: 45px;
  height: 50px;
  text-align: center;
}

.box::after {
  content: '';
  width: 100%;
  
  border-bottom: 2px solid #0f0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex space-between">
  <div class="col d-flex flex-column justify-content-between">
     <div class="row kpi mb10 d-flex justify-content-between">
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
     </div>
     <div class="row kpi mb10 d-flex justify-content-between">
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
     </div>
  </div>
</div>

相同 CSS，相同页面，不同呈现

Same CSS, Same Page, Different Rendering

css

rendering

更新 1：

更新 2：