html - 图例在 Firefox 中的边距未正确居中

Question

我希望有人能在这里发现这个问题，因为不幸的是我不能在 jsfiddle 中轻松地重现它（编辑：事实证明我可以，请参阅下面链接的 jsfiddle），所以必须有别的东西在起作用。

请参阅随附的屏幕截图，Firefox 中的意外结果和 Chrome 中的预期结果：

相关的 CSS（好吧，Stylus）：

legend
      center()
      width 750px
      font-size 28px
      margin-top 80px
      margin-bottom 20px
      color color-text

所有容器 ( fieldset, form) 的宽度均为 100%。

（center()来自jeet.gs - 似乎只是添加了float: none,display: block和margin: 0 auto- 但您可以在屏幕截图中看到结果。）

这是一个似乎工作得很好的 jsfiddle：https ://jsfiddle.net/nfLudt59/1/ - 它告诉我这不是图例元素固有的问题。编辑：我没有将图例包装在 afieldset中，完成后，问题被重现。

我错过了一些非常明显的东西吗？

score 0 · Accepted Answer

因此，这显然是 Chrome 和 Firefox 之间的差异，将在其他地方找到的答案与一些 MACGyver 结合起来，解决方案似乎是：

HTML

<fieldset>
  <legend align="center">
    Hello
  </legend>
</fieldset>

CSS

fieldset{
  width: 100%;
}
legend{
  text-align: left;
  display: block;
  width: 200px;
  margin: 0 auto;
}

1 回答 1