Centrado UL não irá expandir horizontalmente no Firefox / Opera (obras em Safari, IE6 / 7/8)

Question

Eu tenho um ul (denominado como uma mesa ala cssplay) centrada que está tendo elementos li adicionados a ele após página render, e parece funcionar muito bem em tudo, mas o Firefox e Opera.

O efeito desejado é ter a fileira de elementos li centradas mesmo se há apenas um ou dois deles. Este exemplo simula o problema com jQuery adicionando um li dois segundos depois que a página está pronto.

Por alguma razão, parece que o Firefox 3.05 e Opera 9.63 manter o ul com a largura sorteio inicial após o terceiro li é adicionado, mesmo que não haja nenhuma largura especificada em qualquer lugar do CSS.

Este é, naturalmente, absolutamente me assassinar, e qualquer ajuda seria apreciada.

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

Answer 1

Os tipos de exibição table-* são ainda bastante underdefined, e por isso não é nenhuma surpresa que você está recebendo um comportamento diferente aqui. Na minha experiência, FF também tem alguns problemas com a aplicação de determinadas regras para o conteúdo inserido. Felizmente, porém, há uma maneira mais intuitiva para o código desta página que também acontece a trabalho .

Ao invés de definir o <ul/> para display:table, deixá-lo como display:block (o padrão) e dar-lhe text-align:center. Você realmente não se importa que o <ul/> shrinkwraps as tabelas incorporadas neste caso (que é o resultado líquido que seu código está conseguindo), você só quer as mesas-se a ser centradas.

Como um bônus, o que lhe permite remover o <div/> embrulho, já que é lá apenas para fornecer um limite para as margens da <ul/> para empurrar fora. Desde que você não está usando mais essas margens, você pode simplesmente usar o <ul/> como o bloco contendo, e dar-lhe a borda em seu lugar.

Answer 2

Eu não posso lhe dar uma resposta real, mas como ninguém mais respondeu ... Eu corri através dele no Firebug (no Firefox 3.01), e quando eu mudei o estilo CSS de #rounds li para outra coisa, dizer em linha, em seguida, volta para inline-mesa, o layout corrigido em si. Portanto, parece que suas regras CSS são muito bem, e que o problema está relacionado ao fato de que o item da lista extra é inserido através de Javascript. Eu também verificado que por se livrar de JQuery e inserindo um script W3C DOM para fazer a mesma coisa, e com certeza, mesmo problema.

Eu estou querendo saber se você pode ter encontrado um bug no Firefox (e Opera, eu acho), onde a página não é refluído adequadamente quando as coisas são inseridas via Javascript.

Answer 3

Você parece estar pondo inline-table dentro de um table e table-cells dentro table sem qualquer table-row. Desde que não é válido, qualquer comportamento navegador aleatório pode resultar.

Em qualquer caso, display: table* é mal suportado (especialmente no IE). Se você quiser layout da mesa hoje é melhor ficar com mesas reais. Não completamente certo o que você está tentando alcançar; como Xanthir sugere existem maneiras mais simples para alcançar centralização simples.