Espacement des lignes et des polices dans différents navigateurs

Question

Existe-t-il un moyen raisonnable de contrôler l'espacement des polices dans tous les navigateurs de sorte que le texte s'aligne comme prévu, à l'exception du positionnement absolu? Prenons l'exemple suivant d'un projet, je travaille sur:

Le premier est Firefox 3.5, le second est IE 8, et le troisième est IE 6. La forme étant représentée est contenu dans un absolument positionné div et est disposé en utilisant des éléments ol/li. J'ai une marge inférieure de 5px sur chaque élément de liste pour fournir l'espacement, mais à part cela, tout est rendu en ligne. Je suis conscient que chaque navigateur rend les polices différemment et c'est ce qui explique le fluage de l'espacement, mais cela peut devenir une nuissance (cette forme particulière m'a donné l'enfer) en essayant de mettre les choses dans une zone fixe (pour quelque chose comme un dialogue modal).

Answer 1

Une autre option consiste à ajouter une déclaration de hauteur à chaque élément parent. De cette façon, la hauteur du texte contenu n'aura pas d'importance tant que vous prenez le plus grand des trois et que vous définissez la hauteur par défaut.

Answer 2

Implémentez une feuille de style CSS reset, puis définissez vous-même tous les styles de vos styles. Cela permettra d'éliminer la tendance des différents navigateurs à appliquer des paramètres par défaut légèrement différents. Par exemple, un navigateur utilisera padding-gauche sur les éléments de liste à puces, un autre utilisera margin-left. (J'oublie qui fait quoi, c'est pourquoi j'utilise toujours reset!) Si vous réinitialisez tout d'abord, vous pouvez alors prendre vos propres décisions sur les tailles de police, les hauteurs de ligne, les marges, etc., et les faire ressortir assez régulièrement dans les différents navigateurs.

Un bon endroit pour commencer est avec reset.csshere de Yahoo ou essayez cet autre here. Une recherche google pour "reset css" vous mènera à beaucoup de discussions, avantages et inconvénients en ce qui concerne cette approche.

Bonne chance!

Answer 3

Inclure quelque chose comme ça en haut de votre fichier CSS principal ou l'inclure dans un fichier CSS de son propre:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, 
li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, 
td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline; 
} 

Cela effacera tous les styles par navigateur, ce qui vous semble le style CSS identique dans tous les navigateurs.