IE hauteur plus petite que la hauteur de Firefox

Question

Je rencontre des problèmes de CSS lorsque j'essaie de faire en sorte que l'affichage d'IE soit le même que celui de Firefox. En particulier, je suis en train de centrer le texte verticalement dans une boîte tout en ayant pleine hauteur:

montré ici: http://img9.imageshack.us/img9/4045/goddammitv.png

Y at-il de toute façon que je peux obtenir la hauteur du lien pour être le même que l'arrière-plan tout en étant verticalement centre (à la fois dans IE et Firefox)?

CSS:

#buttons 
{ 
    /* RAEG */ 
    float: right; 
    position: relative; 
    left: -50%; 
    text-align: left; 
} 

ul 
{ 
    list-style-type: none; 
    margin: auto; 
    padding-top: 10px; 
    position:relative; 
    left: 50%; 
} 

.lbutton 
{ 
    height: 150px; 
    width: 150px; 
    display: block; 
    float: left; 
    position: relative; 
    text-align: center; 
} 
.lbutton a 
{ 
    display: block; 
    width: 150px; 
    height: 85px; 
    color: #000; 
    border: 1px solid #000; 
    text-shadow: #6374AB 1px 0px 5px; 
    padding-top: 65px; 
} 

HTML:

<div id="buttons"> 
<ul> 
    <li class="orange lbutton"><a href="">projects</a></li> 
    <li class="orange lbutton"><a href="">test</a></li> 
    <li class="orange lbutton"><a href="">test2</a></li> 
</ul> 

PS: la bordure noire est juste pour le débogage;)

Answer 1

je prendrais une approche différente à l'aide line-height. Si vous avez toujours un seul mot, utilisez une hauteur de ligne fixe avec égale à rembourrage haut/bas.

Exemple utiliser

a { 
    display: block; 
    font-size: 12px; 
    line-height: 12px; 
    padding: 50px 0; 
    text-align: center; 
} 

J'essaie de vous abstenir d'utiliser des largeurs/hauteurs fixes, et ne les précise quand je dois assurer que la hauteur sera toujours fixé. Je règle généralement ceci à la valeur de la hauteur de ligne.

hauteur est un élément est calculé en utilisant

line-height + padding 

donc un élément avec haut/rembourrage bas 12px Taille du texte/hauteur de ligne et 50px produirait

12px + 50px + 50px = 112px