图例在 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/ - 它告诉我这不是 legend 元素固有的问题。 编辑： 我没有将图例包装在 fieldset 中，完成后，问题 IS 重现。

我是不是遗漏了一些非常明显的东西？

Answer 1

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

text-align: left

HTML

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

CSS

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

legend not centering correctly with margins in firefox