基本上，要点就在主题中。
当我创建两个具有固定高度（2px）的相同 div 并将缩放更改为 75% 或 125% 时，由于某种原因它们“看起来”不同，有人可以解释一下这里发生了什么吗？我该如何解决这个问题？
.gradient-slider-line {
background: linear-gradient(to right, red , blue);
height: 2px;
}<div>
<div class="gradient-slider-line"></div>
</div>
<br/>
<div>
<div class="gradient-slider-line"></div>
</div>Result:
这确实是由浏览器对子像素值进行舍入引起的，并且可以在当前的 Chrome 和 Firefox 中观察到。 要解决此问题，您应该设置边框样式并not高度 - 参见：
.line {
/* 12px leaves _no_ fractions for many zoom factors: */
margin-top: 12px;
width: 200px;
box-sizing: border-box;
}
.group-height .line {
/* 1px leaves fractions for many zoom factors: */
height: 1px;
background-color: black;
}
.group-border .line {
border-top: 1px solid black;
}
.group-height {
border-right: 10px solid green;
}Check visual line apprearances with different browser/OS zoom!<br> Observe that styling with `height` (left side) leads to unexpected rounding effects, whereas `border` (right side) behaves as expected.
<div style="display: flex">
<div class="group-height">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="group-border">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>With 125% OS zoom this yields the following result:
