UL centrado no se expandirá horizontalmente en Firefox/Opera (funciona en Safari, IE6/7/8)

Question

Tengo un ul centrado (con el estilo de una tabla ala cssplay) al que se le agregan elementos li después de renderizar la página, y parece funcionar maravillosamente en todo menos en Firefox y Opera.

El efecto deseado es tener la fila de elementos li centrada incluso si solo hay uno o dos de ellos.Este ejemplo simula el problema con jQuery agregando un li dos segundos después de que la página esté lista.

Por alguna razón, parece que Firefox 3.05 y Opera 9.63 mantienen el ul en el ancho de dibujo inicial después de agregar el tercer li, aunque no hay ningún ancho especificado en ninguna parte del CSS.

Esto, por supuesto, me está matando por completo y agradecería cualquier ayuda.

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

Answer 1

Los tipos de visualización table-* todavía están bastante indefinidos, por lo que no es sorprendente que esté obteniendo un comportamiento diferente aquí. En mi experiencia, FF también tiene algunos problemas con la aplicación de ciertas reglas al contenido insertado. Afortunadamente, sin embargo, hay una forma más intuitiva de codificar esta página que también sucede con trabajo .

En lugar de establecer <ul/> en display:table, déjelo como display:block (predeterminado) y dele text-align:center. En realidad, no le importa que el <div/> reduzca las tablas en línea en este caso (que es el resultado neto que está logrando su código), solo desea que las tablas estén centradas.

Como beneficio adicional, esto le permite eliminar el envoltorio <=>, ya que solo está allí para proporcionar un límite para que los márgenes del <=> se eliminen. Como ya no está usando esos márgenes, simplemente puede usar <=> como el bloque contenedor y, en su lugar, asignarle el borde.

Answer 2

No puedo darte una respuesta real, pero como nadie más ha respondido ... lo revisé en Firebug (en Firefox 3.01), y cuando cambié el estilo CSS de #rounds li a otra cosa, di en línea, luego de vuelta a la tabla en línea, el diseño se corrigió solo. Parece que sus reglas CSS están bien y que el problema está relacionado con el hecho de que el elemento de lista adicional se inserta a través de Javascript. También lo comprobé deshaciéndome de JQuery e insertando un script DOM del W3C para hacer lo mismo y, efectivamente, el mismo problema.

Me pregunto si podría haber encontrado un error en Firefox (y en Opera, supongo), donde la página no se redistribuye correctamente cuando las cosas se insertan a través de Javascript.

Answer 3

Parece que estás poniendo un inline-table dentro de una table, y table-cellestá dentro table sin ningún table-row.Como eso no es válido, podría producirse cualquier comportamiento aleatorio del navegador.

En todo caso, display: table* tiene poco soporte (especialmente en IE).Si desea un diseño de mesa hoy, es mejor seguir con las tablas reales.No estoy muy seguro de lo que estás tratando de lograr;Como sugiere Xanthir, existen formas más sencillas de lograr un centrado sencillo.