图例没有正确对齐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/ - 它告诉我它不是图例元素中固有的问题。 编辑：我没有将传奇包裹在fieldset中，一旦完成，问题 IS 就会重现。

我错过了一些令人眼花缭乱的事情吗？

Answer 1

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

1. 在图例上使用align="center"（内联）
2. 通过CSS
将text-align: left应用于图例

更新了jsfiddle：https://jsfiddle.net/nfLudt59/3/

HTML

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

CSS

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