légende ne pas centrer correctement avec les marges dans Firefox

Question

J'espère que quelqu'un peut repérer le problème ici, comme malheureusement je ne peux pas facilement le reproduire dans un jsfiddle (Edit: s'avère que je peux, voir le jsfiddle lié ci-dessous) , donc quelque chose d'autre doit être en jeu.

Voir les captures d'écran jointes, le résultat inattendu dans Firefox, et le résultat attendu dans Chrome respectivement:

Le CSS concerné (bien, Stylus):

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

Tous les conteneurs (fieldset, form) ont une largeur de 100%.

(Le center() est de jeet.gs - semble simplement ajouter un float: none, display: block et margin: 0 auto - mais vous pouvez voir le résultat dans les captures d'écran.)

est ici un jsFiddle qui semble fonctionner très bien: https://jsfiddle.net/nfLudt59/1/ - qui me dit que ce n'est pas un problème inhérent à l'élément de légende. EDIT: Je n'avais pas enveloppé la légende dans un fieldset, lorsque cela est fait, le problème IS reproduit. Est-ce que quelque chose me manque?

Answer 1

C'est donc clairement un discrepency entre Chrome et Firefox, combinant une réponse trouvée ailleurs avec une certaine MAcGyver'ing la solution semble être:

1. Utilisez align="center" sur la légende (en ligne)
2. Appliquer text-align: left la légende via CSS

Mise à jour jsFiddle: https://jsfiddle.net/nfLudt59/3/

HT ML

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

CSS

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