Centering legend in Firefox

Question

The problem

The problem is that the following works in Chrome, Opera and IE ^_(!?) but does not work in Firefox:

相关标签:

Answer 1

This solution uses a Firefox specific selector so we don't need to touch the styling for the other browsers. It uses absolute positioning but uses the transform property to center appropriately.

/* indended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}

<fieldset>
  <legend>Fix using absolute and transform</legend>
  <p>This seems to work a bit better.</p>
</fieldset>

Result in Chrome

Result in Firefox