关于缩放时CSS伪元素与div边框错位问题的解决咨询

大家好，最近我在实现一个带渐变边框效果的div时，遇到了缩放对齐的棘手问题，想请教下社区的朋友们怎么解决。

先贴一下我的实现代码 #

HTML部分：

<div>Elzero</div>

CSS部分：

* {
  box-sizing: border-box;
}
div {
  position: relative;
  width: 600px;
  height: 100px;
  margin: 30px auto;
  background-color: #eee;
  font-size: 40px;
  font-weight: bold;
  letter-spacing: 10px;
  text-align: center;
  line-height: 80px;
  border-top: 10px solid transparent;
  border-left: 10px solid #f44336;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #673ab7;
}
div::first-letter {
  color: #f44336;
}
div::before, div::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 10px;
  left: -10px;
  background-image: linear-gradient(
    to right,
    #f44336 20%,
    #2196f3 20%, #2196f3 40%,
    #4caf50 40%, #4caf50 60%,
    #e91e63 60%, #e91e63 80%,
    #6639b6 80%
  );
}
div::before {
  top: -10px;
}
div::after {
  bottom: -10px;
}

遇到的具体问题 #

• 在100%缩放比例下，这个div的显示完全正常，上下的伪元素渐变条和左右边框对齐得很完美
• 但当我把浏览器缩放调整到110%、90%或者67%这些非100%的比例时，就会出现明显的错位：
  拿110%缩放举例，浏览器会把所有像素值重新计算成小数——原来的10px边框会变成约9.16667px，伪元素设置的left: -10px也会被转换成约-8.33333px，直接导致上下渐变条和左右的红、紫边框对不齐了

我的环境和尝试过的方法 #

我用的是Mozilla Firefox 141.0，已经试过给全局元素设置box-sizing: border-box，但这个属性好像对缩放时的分数像素计算导致的错位没有改善。

请问有没有什么可靠的方法，能确保在任意缩放比例下，伪元素都能始终和div的边框保持完美对齐呢？

内容来源于stack exchange