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

Question

I want to place an icon at top right corner inside fieldset. When I use Chrome it looks like this:

But for my surprise Firefox shows the icon lower:

In the example I'm using normalize.css and bootstrap.css.

Anyone know the reason about this strange behavior and is there any workaround without creating different styles for different browsers?

score 3 · Accepted Answer · answered May 11 '16 at 18:02

It seems this is an actual Firefox bug:

A workaround would be to wrap the fieldset with a div and to apply the CSS rule "position: relative" to the wrapper div instead of the 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>

1 Answers1