2

我知道它是一个子像素计算的东西，我读了另外两个关于它的 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>
4

1 回答 1

5

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

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

于 2018-09-04T14:43:12.240 回答