L'alignement Vertical du texte dans un conteneur WebKit vs Firefox

Le problème est que Firefox et les navigateurs basés sur WebKit semblent pour aligner le texte vertical de manière différente lorsqu'ils sont contenus dans un élément qui n'ont pas une même hauteur/hauteur de la ligne et la taille de police est inégale (ou vice versa). J'ai regardé quelques-fil similaire, mais je n'ai pas vraiment vu une grande explication pour ma question.

Envisager http://alternativeto.net/test2.htm. C'est vraiment une page simple avec juste

    .box
    {
        font-size: 15px;
        font-family: Helvetica, Arial;
        background-color: Blue;
        height: 20px;
        width: 60px;
        color: White;
        line-height: 20px;
    }

    <div class="box">
        A text.
    </div>

Si vous ouvrez cette page dans Chrome et Firefox, vous remarquez que cela permet d'aligner les textes de différentes façons: http://screencast.com/t/tjgA2d7T

Est-il un moyen de résoudre ce problème? Est-il "text-align" bien ou quelque chose que j'ai raté?

OriginalL'auteur Olaj | 2011-05-04

9

C'est le navigateur d'un problème de rendu. Utiliser la hauteur de la ligne 1px moins de la hauteur donnée, par exemple:
```
    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}
```
Cela fonctionne bien, mais seulement pour les non-entrée / bouton d'éléments. Je n'ai pas compris exactement pourquoi encore, mais la définition d'une hauteur fixe sur un élément input de type bouton submit ou reset bouton ou élément de n'importe quel type de jeux de l'extérieur de la largeur de l'élément, de ne pas l'intérieur de la largeur comme c'est le cas avec d'autres éléments standard, y compris un, span et div.

OriginalL'auteur Raheel Ayub
13

Cela est dû à des différences dans la manière dont les navigateurs poignée de sous-pixel de positionnement de texte. Si votre hauteur de la ligne est de 20 de pixels, mais une taille de police est de 15 pixels, le texte doit être placé de 2.5 pixels à partir du haut de la boîte de ligne. Gecko ne fait que (et puis antialiases ou s'aligne sur la grille de pixels, au besoin, sur la peinture). WebKit juste des tours de positions à l'entier de pixels lors de la présentation. Dans certains cas, les deux approches donnent des réponses qui diffèrent par un pixel. Sauf si vous êtes en comparant côte à côte, comment pouvez-vous encore dire il y a une différence?

Dans tous les cas, assurez-vous que votre demi-pointe est un entier (c'est à dire que la hauteur de la ligne, moins une taille de police est la même) va rendre le rendu plus cohérent si vous avez vraiment besoin de cela.

OriginalL'auteur Boris Zbarsky
1

Si vous êtes à la recherche d'un moyen de faire une exacte verticale aligner, découvrez Débordement de Pile question Problème avec vertical-align: middle; - j'ai décrit une solution.

Si vous voulez une réponse pourquoi Firebug et Chrome afficher différemment, ce sera un peu plus compliqué. La hauteur de la ligne d'alignement est basé sur la ligne de rendu et les polices peuvent être traités d'une manière très différente à travers les navigateurs. Par exemple, la police de lissage et de la police de poids peut vraiment gâcher votre page.

Aussi, êtes-vous à l'aide de CSS reset pour cette page? Il contient des polices liées à des ajustements en tant que bien, et il peut vous aider à surmonter les problèmes de navigateur. Reportez-vous à Outils CSS: Reset CSS.

OriginalL'auteur vlad saling
1

Pouah, terrible mais vrai! Je viens de tomber sur ce en essayant de créer de minuscules comte de bulles sur une icône, si petite que j'ai eu pour obtenir le droit à côté de texte, de sorte que chaque pixel compté. Prise de la hauteur de la ligne 1x moins que le texte de taille nivelé le champ d'affichage entre FF et Chrome.

Lol, +1 car je suis dans la même situation de "faire de minuscules comte de bulles" (nombre de commentaires genre de chose) et en effet l'un pixel éteint est perceptible.

OriginalL'auteur mahalie

Vous devez vous connecter pour publier un commentaire.