绝对定位的内联元素在 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 应该放在 [=19= 旁边，而不是下面。 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。

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

Absolutely positioned inline elements placed differently in Chrome 76+

html

css

css-position

chromium

display

问题

例子