Margin: l'auto ne fonctionne pas si l'affichage est encadré dans Firefox

Question

Dans Firefox (version 8.0), si je spécifie un élément à display: -moz-box et margin: auto, l'élément n'est plus placé au centre de son élément parent. Cela fonctionne dans Chrome. Est-ce un problème de Firefox, ou est-ce que je manque quelque chose? Comment puis-je résoudre ce problème? Une solution de contournement peut être l'ajout d'un élément wrapper div et la définition de display comme block, mais c'est moche.

Answer 1

-moz-box est le type d'affichage pour les boîtes XUL dans Firefox. Ils ne suivent pas un modèle de boîte CSS normal, donc ne vous centrez pas automatiquement lorsque vous utilisez des marges automatiques. Donc le comportement ici est correct dans Firefox aussi loin que ça se passe: c'est juste le comportement des boîtes XUL. Notez que -webkit-box (ce que j'imagine être ce que vous entendez par "fonctionne dans Chrome") est une chose totalement différente: c'est une implémentation de l'un des premiers brouillons flexbox CSS. Il partage quelques caractéristiques superficielles avec -moz-box et d'ailleurs avec les brouillons flexbox actuels, mais est autrement complètement différent. Maintenant, la vraie question est ... qu'est-ce que vous essayez réellement de faire?

Answer 2

J'ai créé un exemple minimal et testé sous Firefox 7.0.1 unde ubuntu:

<div style="border:1px solid blue;width:200px;height:200px;float:left"> 
<div style="display:block; margin:auto;width:100px;height:50px;">display: block</div> 
</div> 

<div style="border:1px solid blue;width:200px;height:200px;float:left"> 
<div style="display:-moz-box; margin:auto;width:100px;height:50px;">display: -moz-box</div> 
</div> 

Le résultat est ci-dessous. J'espère que cette information vous aide.

Answer 3

According to the official W3C specmargin: auto; devrait affecter flex éléments de la même manière qu'il affecte block éléments. La mise en œuvre de Firefox est un début qui n'est pas actuellement en ligne avec la spécification. J'ai été informé qu'une nouvelle implémentation atterrira autour de la version 18.