Renderização de tabela no Ubuntu Firefox

Question

Eu preciso inserir dados de resultados esportivos em um site regularmente. A tabela aparece deslocada no Ubuntu (usando o Firefox e o Chrome), ou seja, as caixas de entrada não correspondem às descrições de entrada verticais. Consequentemente, a tabela é maior do que deveria e as caixas de entrada não correspondem às descrições de entrada. Isso não acontece na minha caixa Arch - a tabela é renderizada perfeitamente. Não sei onde começar a procurar uma solução para este problema.

O Arch está usando o Firefox 10, mas esse problema está presente há um bom número de meses e atualizações de versão do Firefox. O que acontece é isto: há duas células de entrada lado a lado (onde eu adiciono resultados de partidas de futebol (associação). Essas células se alinham com um nome de equipe, por exemplo

Team One [input 1] [input 2]
Team Two [input 1] [input 2]

O Firefox no Arch renderiza a página como pretendido. As células de entrada estão alinhadas com os nomes das equipes. Isso também funciona no Firefox no Windows.

No Ubuntu, as células são exibidas umas em cima das outras:

Team One [input 1]
[input 2]

Isso, infelizmente, faz com que as caixas de entrada fiquem desalinhadas, ou seja, elas não estão mais ao lado da equipe à qual estão associadas.

Team One [input 1]
Team Two [input 2]
[input 1]
[input 2]

A correspondência de equipes com as caixas de entrada corretas se torna um pesadelo. Aaaaargh.

Não posso fornecer um link porque é um site protegido por senha. Aqui está como deve ficar: link

Aqui está o que parece no Ubuntu 11.10 usando o Firefox 10

link

Instalei o conjunto de fontes da Microsoft e também usei a configuração do Firefox do Arch no Ubuntu, mas o problema persiste.

    

Answer 1

Sem ver o CSS exato, parece que as tabelas usam fontes diferentes . (Compare o capital "B" ou "1" por exemplo).

Algumas coisas que você pode tentar:

• Tente especificar a exata mesma fonte com tamanho dos pixels em seu CSS e veja se isso faz a diferença.
• Use o Firebug para inspecionar as dimensões / preenchimentos das caixas de entrada. Use uma folha de estilo CSS reset para uniformizar as diferenças do navegador.
• Modifique o layout para que seja capaz de acomodar algumas diferenças de pixel nos tamanhos de fonte.
• Use tabelas para dados tabulares . Se você tivesse uma linha de tabela para uma equipe, as células não deveriam ser perdidas verticalmente.

Se você não tiver acesso ao código-fonte do site, ainda terá opções para modificar a aparência.

• A extensão Elegante modificará a aparência (CSS) dos sites da Web (e de acordo com a página add-on, até mesmo o próprio Firefox). Ao escrever as folhas de estilo do usuário, cabe a você modificar o visual ao seu gosto.
• Greasemonkey , por outro lado, é uma arma universal para mudar qualquer coisa na página da web (incluindo o Estrutura HTML) usando JavaScript. Se você pode codificar um algoritmo para o problema, ninguém vai impedi-lo de mudar a página da maneira que você gosta.

Outra maneira de resolver o problema é alterar a aparência ou o tema que você está usando em seu sistema operacional. Os programas GUI usam os widgets do sistema operacional ^* para exibir botões, caixas de seleção e campos de entrada, etc.

Portanto, na maioria dos casos, a alteração do tema altera as fontes / preenchimentos / tamanhos das caixas de entrada.

*) Não é exatamente assim tão simples, mas o ponto é que a aparência do widget é emprestada pelo seu navegador. É por isso que parece nativo.