"Tabla" de dos elementos alineada muy bien

Question

Esta es una pregunta un tanto abierta, pero realmente quiero entenderla, así que no me importa.

Tengo una "tabla" de dos elementos (CSS con tramos). La columna izquierda siempre tiene un ícono de 20x20 píxeles. La segunda columna tiene una sola línea de texto asociada con el icono.

He revisado todo tipo de ideas que se me ocurrieron para hacer que se vea exactamente igual en IE6-8, Firefox 3.5 y Google Chrome, pero todas las ideas hacen que el texto sea uno o dos píxeles fuera de en el mejor de los casos .

Estoy buscando una forma infalible que no sea < table > para hacer que esta lista se vea exactamente igual en todos los navegadores. Me refiero a cada píxel.

Answer 1

Pixel perfect no existe: simplemente no tienes ese tipo de control sobre la gama de navegadores que existen, y tampoco es rentable que lo intentes. Rendimientos decrecientes, tu nombre es IE6.

Fwiw, también parece probable que sería mejor aquí tener simplemente una lista ( < ul > ) con el tipo de estilo de lista establecido en none y usando imágenes de fondo para mostrar su 20x20 iconos.

Answer 2

Estás persiguiendo un objetivo en movimiento. Con tantos broswers y tantas versiones, lo más probable es que nunca haya una manera de hacerlo perfecto. Entonces, incluso si lo acerca a la perfección, la próxima versión de cualquiera de los navegadores puede volver a romperlo.

Answer 3

Aquí está mi pregunta: si es realmente una tabla, ¿por qué no usar < table > ? Una cosa es evitar el uso de tablas para propósitos de diseño de página general, pero la etiqueta de tabla sigue siendo perfectamente legítima para, bueno, mostrar tablas.

Si eso no funciona para usted, considere una modificación de < ul > o similar. Sin embargo, es poco probable que lo consiga verdaderamente perfecto en píxeles en todos los navegadores.

Answer 4

Sí ...

Renderizar una imagen;)

(Lo siento, pero si lo quieres realmente "pixle perfect", entonces esta es probablemente la forma más fácil)

Answer 5

Estoy de acuerdo con Tony y annakata . Sin embargo, generalmente el mejor resultado proviene de algo simple como esto:

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

Que al menos se ve exactamente igual en webkit, ie8 y firefox. (Creo que ie7 también, pero no probé)

Answer 6

Estoy triste por esta gran edición. No leí la pregunta correctamente. Como algunos ya han dicho, es muy difícil lograr la perfección de píxeles en un sitio web, ya que cada navegador representa las páginas de manera diferente. Con css puedes usar el posicionamiento absoluto y relativo de prácticamente cualquier cosa, pero está lejos de ser perfecto cuando se trata de compatibilidad cruzada con el navegador.