UL centré ne s'étendra pas horizontalement dans Firefox / Opera (fonctionne dans Safari, IE6 / 7/8)

Question

J'ai un ul centré (ressemblant à un tableau ala cssplay) auquel sont ajoutés des éléments li après le rendu de la page, et il semble fonctionner à merveille dans tout sauf Firefox et Opera.

L'effet recherché est de centrer la rangée d'éléments li, même s'il n'y en a qu'un ou deux. Cet exemple simule le problème avec jQuery en ajoutant un li deux secondes après que la page soit prête.

Pour une raison quelconque, il semble que Firefox 3.05 et Opera 9.63 conservent la valeur ul à la largeur de tirage initiale après l'ajout du troisième li, même s'il n'y a pas de largeur spécifiée à un endroit quelconque dans le CSS.

Ceci, bien sûr, m’assassine, et toute aide serait appréciée.

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display -table.html

Answer 1

Les types d’affichage table-* sont encore assez mal définis et il n’est donc pas surprenant que vous obteniez un comportement différent ici. D'après mon expérience, FF rencontre également des problèmes d'application de certaines règles au contenu inséré. Heureusement, cependant, il existe un moyen plus intuitif de coder cette page qui se trouve également au travail .

Plutôt que de définir <ul/> sur display:table, laissez-le comme display:block (valeur par défaut) et attribuez-lui text-align:center. Vous ne vous souciez pas vraiment de savoir si <div/> la contraction enrobe les tables en ligne (ce qui correspond au résultat net obtenu par votre code), vous voulez simplement que les tables elles-mêmes soient centrées.

En prime, cela vous permet de supprimer le retour à la ligne <=>, car il n’est là que pour définir une limite à partir de laquelle les marges de <=> doivent être repoussées. Puisque vous n'utilisez plus ces marges, vous pouvez simplement utiliser le <=> comme bloc conteneur et lui attribuer la bordure.

Answer 2

Je ne peux pas vous donner une vraie réponse, mais comme personne d'autre n'a répondu ... je l'ai parcouru dans Firebug (dans Firefox 3.01), et lorsque j'ai changé le style CSS de #rounds li, quelque chose d'autre inline, puis retour à inline-table, la mise en page se corrige elle-même. Il semble donc que vos règles CSS fonctionnent correctement et que le problème est lié au fait que l'élément de liste supplémentaire est inséré via Javascript. J'ai également vérifié cela en éliminant JQuery et en insérant un script DOM W3C pour faire la même chose et le même problème.

Je me demande si vous avez peut-être trouvé un bogue dans Firefox (et Opera, je suppose), où la page n'est pas rediffusée correctement lorsque des éléments sont insérés via Javascript.

Answer 3

Vous semblez mettre un inline-table dans un table et table-cell dans un table-row sans aucun display: table*. Étant donné que ce n'est pas valide, cela peut entraîner un comportement aléatoire du navigateur.

Dans tous les cas, <=> est mal pris en charge (en particulier dans IE). Si vous voulez mettre en page les tables aujourd'hui, mieux vaut s'en tenir aux tables réelles. Pas tout à fait sûr de ce que vous essayez de réaliser; comme le suggère Xanthir, il existe des moyens plus simples de réaliser un centrage simple.