html - Google Chrome DevTools 中的错误元素位置

Question

我有这样的 HTML 标记：

<div id="renderer-selection">
  <div class="renderer-selection-box">
    <div class="handle"></div>
  </div>
</div>

使用这样的样式：

#renderer-selection {
  position: absolute;
  transform: translate(200px, 200px);
}
.renderer-selection-box {
  position: absolute;
/*  transform: translate(0, 0); */
}
.handle {
  position: absolute;
  transform: rotate(30deg);
}
.handle::after {
  content: "";
  position: absolute;
  background-color: red;
  width: 5px;
  height: 18px;
  border: 1px solid #2FA5E7;
}

在 Google Chrome 中使用检查工具时，问题是元素位置不正确：

当我取消注释样式中的空变换时，检查位置变为正确呈现。自上次浏览器更新一两次后出现此行为。这个问题的原因是什么？有人可以解释这种行为的含义。

JSFiddle 上的所有相关代码

标签： htmlcssgoogle-chromegoogle-chrome-devtools

Answer 1

这是因为您使用 transform 您可以使用它会更好地工作：

#renderer-selection {
  position: absolute;
 /* transform: translate(200px, 200px); */
top: 200px;
 left: 200px;
}