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

Question

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

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

在 example 中，我使用 normalize.css 和 bootstrap.css。

有人知道这种奇怪行为的原因吗？有没有为不同浏览器创建不同样式的解决方法？

Answer 1

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

解决方法是用 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>

CSS 'top' in fieldset behaves differently in chrome and firefox