在某些缩放级别下将绝对定位的 div 对齐 1px

Question

我有两个绝对定位的 div，它们排列起来看起来像“L”或扭结的管道。 Chrome 在 MacBook Pro（16 英寸，2019 年）上以 100% 缩放时，它看起来像这样：

问题是，当我调整浏览器缩放级别时，两个 div 进进出出一个像素。例如，这是 90% 缩放时的样子：

同样的事情发生在 110% 缩放。如果我通过 1px 调整位置，它会回到对齐状态。是什么原因导致的，有没有办法阻止所有缩放级别？

这是 codepen 上的一个工作示例：https://codepen.io/elethan/pen/gOLQXrB

CSS:

#outer-container {
  width: 200px;
  height: 40px;
  background: gray;
  padding: 10px;
  position: absolute;
  top: 50%;
  right: 50%;
}

#progress-bar {
  background: purple;
  height: 40px;
  width: 80%;
  border: 4px solid gray
}

#down {
  background: purple;
  height: 40px;
  width: 40px;
  border: 10px solid gray;
  border-top: 0 solid transparent;
  
  position: absolute;
  left: 124px;
  top: 54px;
}

HTML:

<div id="outer-container">
  <div id="progress-bar"></div>
  <div id="down"></div>
</div>

Answer 1

您可以尝试这个解决方案，我将#outer-container 的位置更改为相对位置，因为很难对所有 div 使用绝对位置。

#outer-container {
  width: 200px;
  height: 40pxpx;
  background: gray;
  padding: 10px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

回答

由于在浏览器中处理浮点数时精度不佳。

最糟糕的是，它们对呈现的元素（我们实际看到的）与元素的大小或定位（它们占据或放置的大小）的舍入方式不同。

这就是为什么某些元素看起来与它们应有的位置相差 +/- 1 像素的原因。它可能会根据渲染引擎甚至 window 的大小而有所不同，正如您可以尝试的那样，它似乎 fix/break 您调整大小的每个像素。

例子

在 Firefox 中以 90% 缩放：

来自 10px 的 outer-container 的 padding 呈现 9（很好）。
来自 4px 的 progress-bar 的 border 呈现 3（从 3.6 向下舍入）
来自 40px 的 progress-bar 的 content 呈现 36（很好）。
目前：9 + 3 + 36 = 48.
来自 54px 的 down 的 top 位置呈现在 49（从 48.6 向上舍入）。

在这种情况下，问题似乎是 down 的位置 top 向上舍入，border 的宽度 progress-bar 向下舍入].那是 progress-bar 和 down 框之间的空像素。

这只是单个浏览器中几个元素的示例，您可以想象，每个浏览器屏幕上的每个元素都会一直发生这种情况。

在某些缩放级别下将绝对定位的 div 对齐 1px

Alignment of absolutely positioned divs off by 1px at some zoom levels

html

css

layout

css-position

回答

例子