problème d'alignement de la police dans les navigateurs basés sur webkit

Question

Voici le code:

<style type="text/css"> 
    html, body {font:0.9em/1.2em arial, verdana, helvetica, sans-serif;} 
    #todayOn {background-color:#efefef; repeat-x top left;border-bottom:1px solid #ddd;border-top:1px solid #ddd;height:52px;margin:15px 0;} 
    #todayOn #pageTitle {float:left;padding-left:3px;} 
    #todayOn #pageTitle h2 {color:#feb425;font-size:32px;margin:10px 0 0 0;padding:0;} 
    #todayOn #pageTitle h2 em {color:#7498c0;display:block;font-size:14px;font-style:italic;font-weight:normal;line-height:20px;padding:5px 0 0 0;} 
    </style> 

<div id="todayOn"> 
    <div id="pageTitle"> 
    <h2>TODAY <em>on this page.com</em></h2> 
    </div> 
</div> 

Dans Firefox, IE (6+), Opera, etc. le sous-titre "sur ce page.com" affiche verticalement comme je le veux à.

Dans les navigateurs Webkit comme Chrome et Safari, il est réduit de quelques pixels. Quel est le problème? Merci.

Answer 1

Les deux line-height et padding-top influera sur l'espace entre « aujourd'hui » et le texte souligné (au moins de la façon dont je l'ai lu, il est affiché sous « aujourd'hui » à cause de display:block). Peut-être que seul le rembourrage ou seulement la hauteur de ligne l'affichera de la même façon dans tous les navigateurs.