«Table» à deux éléments bien alignée

Question

C'est une question un peu ouverte, mais je veux vraiment comprendre celle-ci, donc je m'en fiche.

J'ai un "tableau" à deux éléments. (CSS avec des portées). La colonne de gauche a toujours une icône de 20x20 pixels. La deuxième colonne a une seule ligne de texte associée à l’icône.

J'ai passé en revue toutes sortes d'idées que je pourrais trouver pour rendre ce look identique dans IE6-8, Firefox 3.5 et Google Chrome, mais toutes les idées font en sorte que le texte en soit un. ou deux pixels désactivés au mieux .

Je recherche un moyen irréprochable de ne pas utiliser & table pour que cette liste soit exactement la même dans tous les navigateurs. Je parle de chaque pixel.

Answer 1

Pixel perfect n'existe pas - vous n'avez simplement pas ce genre de contrôle sur la gamme de navigateurs existants, et il n'est pas rentable pour vous d'essayer de le faire. Diminution des retours, ton nom est IE6.

Fwiw, il semblerait également que vous feriez mieux ici d'avoir simplement une liste ( < ul > ) avec le type de style de liste défini sur none et l'utilisation d'images d'arrière-plan pour afficher votre format 20x20. icônes.

Answer 2

Vous poursuivez une cible en mouvement. Avec autant de auteurs et de versions, il n'y aura probablement jamais moyen de le rendre parfait. Ensuite, même si vous vous rapprochez de la perfection, la prochaine version de l'un des navigateurs pourrait la détruire à nouveau.

Answer 3

Voici ma question: si c'est vraiment une table, pourquoi ne pas utiliser < table > ? C'est une chose d'éviter d'utiliser des tableaux à des fins de mise en page générale, mais la balise de tableau est toujours parfaitement légitime pour l'affichage de tableaux.

Si cela ne fonctionne pas pour vous, envisagez une modification

ou ou une modification similaire. Il est toutefois peu probable que vous obteniez un résultat vraiment parfait au pixel près dans tous les navigateurs.

Answer 4

Oui ...

Rendre une image;)

(Désolé, mais si vous voulez vraiment "pixel parfait", c'est probablement le moyen le plus simple)

Answer 5

Je suis d'accord avec Tony et annakata . Cependant, le meilleur résultat provient généralement de quelque chose de simple, comme ceci:

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

Qui au moins a exactement la même apparence dans webkit, ie8 et firefox. (Je crois que ie7 aussi, mais je n'ai pas testé)

Answer 6

Je suis sory pour cet énorme montage, je n'ai pas lu la question correctement. Comme certains l’ont déjà dit, il est très difficile d’obtenir une perfection de pixel sur un site Web, car chaque navigateur affiche les pages différemment. Avec CSS, vous pouvez utiliser le positionnement absolu et relatif de n'importe quoi sauf sa compatibilité avec les navigateurs.