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

Question

我知道它是一个亚像素计算的东西，我读了另外两个关于它的 SO (1, 2)，但是，我想知道是否有针对这种情况的优雅解决方案 without改变规范（因为我知道如果我在父容器周围添加额外的填充将避免它）。 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 的解决方案（参见 here）是使用 'thin' 而不是 CSS 中的“1px”。它似乎可靠地制作了一个 1px 的边框。

此外，我无法使用您共享的 codepen 复制问题，以防未来的开发人员看到此问题并想要复制问题 this site 在缩小时始终会产生错误（对我而言） .

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

How to make sure the 1px border always show up regardless how much the user zoom in chrome (or any browser)?

css

google-chrome

zooming

subpixel