Duas elemento “mesa” bem alinhados

Question

Esta é uma pergunta um pouco aberto, mas eu realmente quero entender este assim que eu não me importo.

Eu tenho um dois-elemento "table" (CSS com vãos). A coluna da esquerda sempre tem um ícone que é 20x20 pixels. A segunda coluna tem uma única linha de texto associado com o ícone.

Eu passei por todos os tipos de idéias que eu poderia vir acima com para fazer este olhar exatamente o mesmo em IE6-8, Firefox 3.5 e Google Chrome, mas todas as idéias resultar em um texto sendo ou dois pixels off na melhor das hipóteses .

Eu estou procurando uma maneira não-<table> à prova de idiota para fazer esta lista olhar exatamente o mesmo em todos os navegadores. Quero dizer a cada pixel.

Answer 1

Pixel perfeito não existe - você simplesmente não têm esse tipo de controle sobre a variedade de navegadores lá fora, e nem é rentável para você tentar fazê-lo assim. Retornos decrescentes, teu nome é IE6.

Fwiw, ele também soa provável que você faria melhor aqui simplesmente para ter uma lista (<ul>) com list-style-type definido como Nenhum e usando imagens de fundo para exibir seus 20x20 ícones.

Answer 2

Você está perseguindo um alvo em movimento. Com tantas broswers e tantas versões lá provavelmente nunca mais ser uma maneira de torná-lo perfeito. Então, mesmo se você fizer obtê-lo perto da perfeição a próxima versão de qualquer um dos navegadores pode quebrá-lo novamente.

Answer 3

Aqui está a minha pergunta: se é realmente uma mesa, por que não usar <table>? É uma coisa para evitar o uso de tabelas para fins de layout geral página, mas a marca de tabela ainda é perfeitamente legítimo que, bem, mostrando tabelas.

Se isso não funcionar para você, considere uma modificação <ul> ou similar. É improvável, porém, que você nunca vai buscá-la verdadeiramente pixel perfeito em todos os navegadores.

Answer 4

Sim ...

Render uma imagem;)

(Desculpe, mas se você quiser realmente "perfeita pixle", então esta é provavelmente a maneira mais fácil)

Answer 5

Eu concordo com Tony e annakata . No entanto, geralmente o melhor resultado vem de algo simples como este:

<span><img src="images/icon.gif" style="vertical-align:text-bottom;" />Some text</span>

quais pelo menos parece exatamente o mesmo em webkit, o IE8 e Firefox. (Eu acredito que o IE7 também, mas eu não fiz teste)

Answer 6

Eu sou sory para este enorme editar Eu não li a pergunta corretamente. Como alguns já disse que é muito difícil de alcançar PixelPerfection em um site, cada navegador renderizar as páginas de forma diferente. Com CSS você pode usar absolut e posicionamento relativo basicamente qualquer coisa mas seu longe de ser perfeito quando se trata de compatibilidade cross-browser.