CSS在fieldset中的'top'属性在Chrome和Firefox中表现不同

Question

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

但让我惊讶的是，Firefox将图标显示得更低：

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

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

- Vangi

Answer 1

看起来这是一个真正的Firefox bug:

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

一个解决方法是用一个div包裹fieldset，然后将CSS规则“position: relative”应用于包装器div而不是fieldset。

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>

- lampyridae