删除 Chrome 上嵌套 div 之间的奇怪空白

Question

如何去除 Chrome 上两个嵌套 div 之间奇怪的空白。

<div class="bar">
    <div class="progress">
    </div>
</div>

.bar {
 width: 200px;
  height: 6px;
  border: 1px solid black;
  border-radius: 3px;
}

.progress {
  height: 100%;
  width: 50%;
  background: black;
}

这里是小提琴的链接：http://jsfiddle.net/hfob7yz4/1/。
在 Chrome 上看起来像 this 对我来说有奇怪的边距。 在 Firefox 上，它看起来像预期的一样正常： firefox-img

它还取决于屏幕宽度。这个问题只出现在我的笔记本电脑上。
谢谢

Answer 1

原因是主 div 周围有一个边框，并且在某些屏幕上可见 避免这种添加

.bar {
    box-sizing: border-box;
}

read more here

Answer 2

在不同的缩放级别上，您会遇到一种边缘效果 - 在系统的计算中存在一些像素“落后”，因为它试图将部分 CSS 像素映射到可能构成 CSS 像素的几个屏幕像素在现代屏幕上。

您可以使用线性渐变使用背景图像绘制进度，而不是需要第二个内部 div - 这可以根据需要由 JS 动态更改。

.bar {
  --progress: 50%;
  width: 200px;
  height: 6px;
  border: 1px solid black;
  border-radius: 3px;
  background-image: linear-gradient(to right, black 0 var(--progress), transparent var(--progress) 100%);
}


}

<div class="bar">
</div>