IE et Chrome calcul CSS padding différemment

J'ai le texte suivant le CSS et le HTML:

    .TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}

<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>

Le problème, c'est que le rendu est différent dans IE et Chrome. Voici à quoi il ressemble:

IE et Chrome calcul CSS padding différemment

Chrome est sur le dessus et c'est à dire sur le fond. Sur IE, les chiffres ne regarde pas alignés verticalement. J'ai essayé de faire toutes sortes de combinaisons sur le CSS mais aucun m'ont donné un uniforme de l'alignement vertical et de dimensionnement.

Si vous voulez l'essayer, il y a un **tripoter ici.**

Grâce.

Ils sont le calcul de la marge correctement. Les boîtes sont de l'égalité des largeurs et des hauteurs. Pourquoi le texte n'est pas aligné la même sur les deux navigateurs est peut-être un autre problème.
Avez-vous essayé d'utiliser un CSS reset? Il va se débarrasser de nombreuses incohérences entre les navigateurs. Il sera probablement enlever un peu de CSS par défaut, vous assumez seront là, mais c'est juste une question de mettre les dos. Totalement en vaut la chandelle, et encore plus efficace lorsque vous démarrez votre projet avec eux.

OriginalL'auteur frenchie | 2012-03-21

  1. 5

    Essayez d'utiliser line-height:18px; verticale et pas de padding (padding:0 2px;).

    L'homme, j'ai passé tellement de temps sur ce! Merci pour la ligne de hauteur à la suggestion, j'ai quitté le rembourrage en est et il fonctionne comme un charme.
    Je suis content d'avoir pu aider! 🙂 Bonne chance!

    OriginalL'auteur Sorin Buturugeanu

  2. 3

    Vous pouvez toujours utiliser un peu de IE hack:

    _padding-top:4px (par exemple)

    Si vous choisissez d'aller en bas de l'IE hack root, voici comment appliquer les différentes versions d'IE:

    • padding-top:4px\9; - IE8 et ci-dessous
    • *padding-top:4px; - IE7 et ci-dessous
    • _padding-top:4px; - IE6

    Al

    OriginalL'auteur Alex

  3. 2

    Ne pas utiliser padding mais l'utilisation line-height (préférable d'utiliser l'unité em) sur la divs.
    En passant, je suggère que vous n'avez même pas utiliser divs, mais une liste (ul largeur lis).

    OriginalL'auteur Frank van Wijk

  4. 1

    Ils sont correctement milieu aligné dans IE. Essayez d'ajouter un q dans l'une des cases, et vous verrez exactement ce que je veux dire.

    Vous pouvez "fix" et pour obtenir de google Chrome en ajoutant: line-height: 18px;.

    OriginalL'auteur Niet the Dark Absol

  5. 0

    C'est parce que Chrome et IE ont des valeurs différentes pour défaut line-height.

    Définir la line-height à 19px et il devrait aligner verticalement dans les deux navigateurs

    OriginalL'auteur danwellman