如何确保无论用户在chrome(或任何浏览器)中放大多少,都始终显示1px边框?

我知道这是一个亚像素计算的问题,我读到另外两个关于它的( 1 ,则, 2 )然而,我想知道是否有一个优雅的解决方案专门针对这种情况 在不改变规范的情况下(因为我知道如果在父容器周围添加额外的填充将避免它) 。 https://codepen.io/adamchenwei/pen/GxKZpd 当用户放大50%时,框的边框宽度为1像素,悬停效果的背景色会以某种方式覆盖边框本身 *注意:我确实意识到我正在处理的实际组件,当我放大75%左右时,它会消失,因此请在将光标悬停在每个项目上时尝试不同的百分比,以查看右侧和底部的边框在特定缩放级别下何时消失,并非所有缩放级别都会观察到它!

工作站:

我正在开发一款带有最新Chrome浏览器的15.4英寸Macbook pro。

CSS

.container {
  border-width: 1px;
  border-color: lightgray;
  border-style: solid;
}

.aaa {
  &:hover {
    background-color: beige;
  }
}

HTML

<div class='container'>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
  <div class='aaa'>abc</div>
</div>