html - CSS div 宽度视觉上不准确

Question

我有几个 div，每个 2px 宽，它们看起来不一样(取决于它们的位置)。虽然它们被放置在全像素上，但它们的宽度看起来不同。这是所有浏览器的问题。这是可以解决的问题吗？

.a{
  position:relative;
  width:300px;
  height:10px;
  background:#ccc;
}
.b1{
  position:absolute;
  left:50px;
  width:2px;
  height:100%;
  background:blue;
}
.b2{
  position:absolute;
  left:100px;
  width:2px;
  height:100%;
  background:blue;
}
.b3{
  position:absolute;
  left:150px;
  width:2px;
  height:100%;
  background:blue;
}

<div class="a">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>

Answer 1

如果你的意思是第一个“条”从开始是 50px 然后条之间的距离减小一点，那是因为你没有在第二个和第三个“的偏移量中包括条的宽度”栏”:

.a{
  position:relative;
  width:300px;
  height:10px;
  background:#ccc;
}
.b1{
  position:absolute;
  left:50px;
  width:2px;
  height:100%;
  background:blue;
}
.b2{
  position:absolute;
  left:102px;
  width:2px;
  height:100%;
  background:blue;
}
.b3{
  position:absolute;
  left:154px;
  width:2px;
  height:100%;
  background:blue;
}
[class^="b"]:after {
  content: '50px';
  width: 50px; height: 2px;
  position: absolute; bottom: -2px; left: -50px;
  text-align: center;
  font-size: 11px; font-family: sans-serif;
  background: lightcoral;
}

<div class="a">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>