html - 浏览器之间内联元素内的绝对定位不一致

Question

我目前正在努力解决 Firefox 和 Chrome 之间的一些差异，当将绝对定位元素放置在具有 display:inline; 的相对定位元素中时，它们会表现出不同的行为。 .

在 Chrome 中，以下示例将“Foo”标签放在文本输入的右下角的顶部，而在 Firefox 中，“Foo”标签放在输入上方的“Example”文本的顶部盒子。

.box {
  width: 300px;
  border: 1px solid black;
}
.relative-box {
  position: relative;
}
.relative-box::after {
  content: "Foo";
  position: absolute;
  bottom: 0px;
  right: 0px;
  background: #AAA;
}
input[type="text"] {
  display: inline-block;
  width: 260px;
}

<div class="box">
  <label class="container">
    <span class="relative-box">
      Example:
      <input type="text"/>
      </span>
  </label>
</div>

我很想知道是否有任何方法可以保持完全相同的功能，包括使用 <label> ，同时还获得“Foo”文本的一致呈现。

我最好有一个不涉及更改 display:inline; 的解决方案其他任何事情，因为对于我的应用程序，这也会产生额外的不良影响。

PS:请注意，这是一个最小的工作示例。这看起来对用户非常不友好的事实是因为很多样式未应用于此示例。

Answer 1

Firefox 保持每个框的大小唯一。因此，它不会使相关框与输入的大小相同。

如果您在“相对框”div 中使用显示: block ，它将适合您的 child 在 firefox 中的大小。因此两者的行为将相同。