css - 相同的 CSS，相同的页面，不同的渲染

Question

谁能解释下面显示的这种差异的原因？

在底部面板中，彩色条比顶部面板更厚。

两者的 CSS 相同；

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

浏览器：Chrome 84

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

我在 CodePen 中看到的；

标签： cssrendering

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>