CSS div width visually inaccurate - html

Question

I have several divs, each 2px wide and they dont look the same (depending on their position). Although they are placed on full pixel, their width looks different. This is the problem in all browsers. Is this something that can be fixed?
.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

If you mean that the first "bar" is 50px from the start and then the distance between the bars decreases by a little, it is because you do not include the width of the bar in the offset of the 2nd and 3rd "bar":
.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>