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

Question

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

工作站：

我正在使用带有最新Chrome浏览器的Macbook pro 15.4英寸。

.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>

Answer 1

我发现的唯一不改变HTML的解决方案(见这里(是在CSS中使用"thin"而不是"1px"。它似乎可靠地制作了 1px 边框。

此外，我无法使用您共享的代码笔复制该问题，因此万一未来的开发人员看到此问题并想要复制该问题，该站点在缩小时始终会产生错误(对我来说(。