html - 绝对定位的内联元素在 Chrome 76+ 中的位置不同

Question

问题

由于 Chrome 76 绝对定位内联元素没有 bottom、left、right 或 top 属性放置不同。

例子

在 Firefox (69) 和 Chrome (76+) 中查看下面的代码片段。 Chrome 将在新行显示 button 和 span，而 Firefox 将在 label 旁边显示它们。

div {
  margin: 2em auto;
  position: relative;
}

input {
  width: 100%;
}

button,
span {
  position: absolute;
}

<div>
  <label for="text_field1">Example with button</label>
  <button>BUTTON</button>
  <input type="text" id="text_field1" value="Example value">
</div>

<div>
  <label for="text_field2">Example with span</label>
  <span>SPAN</span>
  <input type="text" id="text_field2" value="Example value">
</div>

预期行为

button/span 应该放在 label 旁边，而不是在它下面。 Chrome 似乎正在将 display 模式从 inline-block/inline 更改为 block (请参阅https://www.w3.org/TR/css-position-3/#dis-pos-flo) 在它计算放置元素的位置之前，而 Firefox 和旧版本的 Chrome 以相反的方式执行此操作。

Chrome 76(意外行为)

Chrome 75(预期行为)

Firefox 69(预期行为)

Edge 16(预期行为)

Safari 12(预期行为)

受影响的浏览器

自 76 版以来的任何基于 Chromium 的浏览器。

这是一个错误还是有意更改 Chromium 在这些条件下定位元素的方式？

我们如何在浏览器中以一致的方式定位元素？

Answer 1

这是错误还是有意更改 Chromium 在这些条件下定位元素的方式？

是的，这是一个错误。

我们如何在浏览器中以一致的方式定位元素？

该错误已在 Chrome 版本 79.0.3908.2 中修复，因此无需采取任何措施。

错误报告可以在这里看到:https://bugs.chromium.org/p/chromium/issues/detail?id=1001438#c19 .