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

Question

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

此外，我无法使用您共享的代码笔复制该问题，以防 future 的开发人员看到此问题并想要复制该问题 this site缩小时始终会产生错误(对我而言)。