L'UL centrata non si espanderà in orizzontale in Firefox / Opera (funziona in Safari, IE6 / 7/8)

Question

Ho un ul centrato (disegnato come una tabella ala cssplay) che ha elementi li aggiunti ad esso dopo il rendering della pagina, e sembra funzionare magnificamente in tutto tranne Firefox e Opera.

L'effetto desiderato è di centrare la fila di elementi li anche se ce ne sono solo uno o due. Questo esempio simula il problema con jQuery che aggiunge un li due secondi dopo che la pagina è pronta.

Per qualsiasi motivo, sembra che Firefox 3.05 e Opera 9.63 mantengano l'ul alla larghezza di disegno iniziale dopo l'aggiunta del terzo li, anche se non c'è alcuna larghezza specificata in nessun punto del CSS.

Questo, ovviamente, mi sta assolutamente uccidendo e qualsiasi aiuto sarebbe apprezzato.

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

Answer 1

I tipi di visualizzazione table-* sono ancora abbastanza indefiniti, quindi non sorprende che tu abbia un comportamento diverso qui. Nella mia esperienza, FF ha anche alcuni problemi con l'applicazione di determinate regole al contenuto inserito. Fortunatamente, però, esiste un modo più intuitivo per codificare questa pagina che funziona anche funziona .

Anziché impostare <ul/> su display:table, lasciarlo come display:block (impostazione predefinita) e assegnarlo text-align:center. In realtà non ti interessa che il <div/> riduca le tabelle inline in questo caso (che è il risultato netto che il tuo codice sta raggiungendo), vuoi solo che le tabelle stesse siano centrate.

Come bonus, questo ti consente di rimuovere il wrapping <=>, dato che è lì solo per fornire un limite per i margini di <=> da cui spingere. Dato che non stai più usando quei margini, puoi semplicemente usare <=> come blocco contenitore e dargli invece il bordo

Answer 2

Non posso darti una vera risposta, ma dal momento che nessun altro ha risposto ... L'ho provato in Firebug (in Firefox 3.01) e quando ho cambiato lo stile CSS di #rounds li in qualcos'altro, diciamo inline, quindi di nuovo a inline-table, il layout si è corretto da solo. Quindi sembra che le tue regole CSS vadano bene e che il problema sia correlato al fatto che l'elemento extra dell'elenco sia inserito tramite Javascript. Ho anche verificato ciò eliminando JQuery e inserendo uno script DOM W3C per fare la stessa cosa e, sicuramente, lo stesso problema.

Mi chiedo se potresti aver trovato un bug in Firefox (e Opera, immagino), dove la pagina non viene ridisegnata correttamente quando le cose vengono inserite tramite Javascript.

Answer 3

Sembra che tu stia inserendo un inline-table all'interno di un table e table-cell s all'interno di table-row senza alcun display: table*. Poiché ciò non è valido, potrebbe verificarsi un comportamento casuale del browser.

In ogni caso, <=> è scarsamente supportato (specialmente in IE). Se vuoi il layout delle tabelle oggi è meglio attenersi alle tabelle effettive. Non sono sicuro di cosa stai cercando di ottenere; come suggerisce Xanthir, ci sono modi più semplici per raggiungere un semplice centraggio.