在Firefox中居中传奇

Question

问题

问题是以下内容适用于Chrome,Opera和IE ^_(!？),但在Firefox中不起作用:

fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

导致Chrome

Firefox中的结果

解决方案黑客

有几个问题,但没有一个令人满意的答案:

/* intended styling */
fieldset>legend {
    display: table;
    float: none;
    margin: 0 auto;
}

fieldset.absolute-fix {
    position: relative;
}
fieldset.absolute-fix>legend {
    position: absolute;
    left: 50%;
}

fieldset.margin-fix>legend {
    margin-left: 50%;
    margin-right: 50%;
    width: auto;
    transform: translate(-50%, 0)
}

fieldset.width-fix>legend {
    width: 100%;
    text-align: center;
}

<fieldset class="absolute-fix">
    <legend>Fix with absolute</legend>
    <p>Not centered and inconsitant styling</p>
    <a href="http://stackoverflow.com/a/4006871/1185053">Source</a>
</fieldset>

<fieldset class="attribute-fix">
    <legend align="center">Fix with attribute</legend>
    <p>Requires use of depreciated HTML and strongly ties presentation to content.</p>
    <a href="http://stackoverflow.com/a/19969606/1185053">Source</a>
</fieldset>

<fieldset class="margin-fix">
    <legend>Fix with margin</legend>
    <p>This is unsatisfying because there is a mis-aligned gap in the border and long legends go over several lines.</p>
</fieldset>

<fieldset class="width-fix">
    <legend>Fix with width</legend>
    <p>This is unsatisfying because there is a gaping hole in the border.</p>
</fieldset>

题

有没有办法不断legend在Firefox 中心,同时保持其他浏览器的样式？

Answer 1

此解决方案使用Firefox特定的选择器,因此我们无需触摸其他浏览器的样式.它使用绝对定位,但使用transform属性适当居中.

/* 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>

导致Chrome

Firefox中的结果