Tabella a due elementi & # 8220; & # 8221; allineato bene

Question

Questa è una domanda un po 'aperta, ma voglio davvero capirla, quindi non mi interessa.

Ho una "tabella" a due elementi (CSS con span). La colonna di sinistra ha sempre un'icona che è 20x20 pixel. La seconda colonna ha una singola riga di testo associata all'icona.

Ho esaminato ogni sorta di idee che ho potuto inventare per rendere questo aspetto esattamente lo stesso in IE6-8, Firefox 3.5 e Google Chrome, ma tutte le idee fanno sì che il testo sia uno o due pixel fuori nella migliore delle ipotesi .

Sto cercando un modo non < table > a prova di errore per rendere questo elenco esattamente uguale in tutti i browser. Intendo ogni singolo pixel.

Answer 1

Pixel perfect non esiste - semplicemente non hai quel tipo di controllo sulla gamma di browser là fuori, e non è redditizio per te tentare di farlo. Ritorni decrescenti, il tuo nome è IE6.

A prima vista, sembra anche probabile che qui farebbe meglio ad avere semplicemente un elenco ( < ul > ) con tipo di elenco impostato su nessuno e usando immagini di sfondo per visualizzare il tuo 20x20 icone.

Answer 2

Stai inseguendo un bersaglio in movimento. Con così tanti broswer e così tante versioni, molto probabilmente non ci sarà mai un modo per renderlo perfetto. Quindi, anche se lo avvicini per perfezionare, la prossima versione di uno qualsiasi dei browser potrebbe interromperla di nuovo.

Answer 3

Ecco la mia domanda: se è davvero una tabella, perché non usare < table > ? Una cosa è evitare di usare le tabelle ai fini del layout di pagina generale, ma il tag table è ancora perfettamente legittimo per, bene, visualizzare le tabelle.

Se ciò non funziona per te, considera una modifica < ul > o simile. È improbabile, tuttavia, che lo otterrai mai perfettamente perfetto per i pixel in tutti i browser.

Answer 4

Si ...

Rendering di un'immagine;)

(Mi dispiace, ma se lo vuoi davvero " pixle perfect " ;, questo è molto probabilmente il modo più semplice)

Answer 5

Sono d'accordo con Tony e annakata . Tuttavia, di solito il risultato migliore viene da qualcosa di semplice come questo:

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

Che almeno sembra esattamente lo stesso in webkit, ie8 e firefox. (Credo anche ie7, ma non ho testato)

Answer 6

Sono sory per questa enorme modifica che non ho letto correttamente la domanda. Come alcuni hanno già detto, è molto difficile ottenere la pixelperfezione su un sito Web poiché ogni browser esegue il rendering delle pagine in modo diverso. Con css puoi usare il posizionamento assoluto e relativo di praticamente qualsiasi cosa, ma è tutt'altro che perfetto quando si tratta di compatibilità tra browser.