字段集中的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包装fieldset并应用CSS规则＆＃34; position：relative＆＃34;到包装器div而不是fieldset。

＆＃13;

＆＃13;

fieldset {
  border: none;
}

.wrap {
  position: relative;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;