Fieldset 中的 CSS“top”在 Chrome 和 Firefox 中的行为不同

Question

我想在里面的右上角放置一个图标fieldset。当我使用 Chrome 时，它​​看起来像这样：

但令我惊讶的是 Firefox 将图标显示在下方：

在示例中，我使用了 normalize.css 和 bootstrap.css。

任何人都知道这种奇怪行为的原因，是否有任何解决方法而不为不同的浏览器创建不同的样式？

Answer 1

这似乎是一个真正的 Firefox 错误：

https://bugzilla.mozilla.org/show_bug.cgi?id=942341

解决方法是用 div 包装字段集，并将 CSS 规则“position:relative”应用于包装器 div 而不是字段集。

fieldset {
  border: none;
}

.wrap {
  position: relative;
}

.abs {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="wrap">
<fieldset>
  <legend>Legend</legend>
  <div class="abs">X</div>
</fieldset>
</div>