fieldset 中的 CSS 'top' 在 chrome 和 firefox 中的行为不同

Question

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

但令我惊讶的是 Firefox 显示图标较低:

在example我正在使用 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>