我有几个 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>
最佳答案
如果你的意思是第一个“条”从开始是 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>
关于html - CSS div 宽度视觉上不准确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57334298/