无论用户放大 chrome（或任何浏览器）多少，如何确保 1px 边框始终显示？

Question

我知道它是一个子像素计算的东西，我阅读了另外两个关于它的 SO（1 , 2），但是，我想知道是否有一个优雅的解决方案专门针对这种情况而不改变规范（因为我知道我是否添加了额外的填充在父容器周围会避免它）。 https://codepen.io/adamchenwei/pen/GxKZpd 如果框具有 1 像素宽度的边框，并且悬停效果的背景颜色会在用户放大 50% 时以某种方式覆盖边框本身 *注意：我确实意识到我正在处理的实际组件，当我放大 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>

Answer 1

我找到的唯一不改变 HTML 的解决方案（见这里）是在 CSS 中使用“瘦”而不是“1px”。它似乎可靠地制作了一个 1px 的边框。

此外，我无法使用您共享的 codepen 复制该问题，以防将来的开发人员看到此问题并希望复制该站点在缩小时始终会产生错误（对我而言）的问题。