La Hauteur de la ligne ne correspond pas à la taille de police

Quand j'ai deux ligne de texte avec différentes polices de taille, ils se chevauchent.
Regardez cet exemple :
http://jsfiddle.net/3WcMG/1/

Tous les " j " et " g " se cachent la à la de la deuxième ligne. Il le fait avec toutes les principales polices.

Pourquoi il agit comme ça? Que puis-je faire pour éviter cela?

EDIT: je sais ce que 'em', je sais comment utiliser les marges, je sais comment faire pour augmenter la hauteur de la ligne, je sais quel est l'effet de la reset css de JSFiddle et ce n'est pas ma question. Ma question est: Pourquoi le fond de la 'j' est en dehors de la zone de texte? C'est comme si j'ai mis négatif margin-top sur la deuxième ligne (sauf que je n'ai pas, il semble que par défaut).
Est-il un moyen pour que la police fit dans la boîte.

EDIT2: Il paraît que c'est un problème de navigateur! Je suis sur chrome 21.0 sur Mac et je vois que :
La Hauteur de la ligne ne correspond pas à la taille de police

si vous décochez la Normalized CSS case à cocher dans le menu de gauche de jsfiddle.net et mise à jour le violon, vous pouvez voir le résultat de ce genre: jsfiddle.net/akhurshid/3WcMG/2
C'est en raison de CSS Reset
Donner votre <p> quelques marges pour éviter de coller deux <p> tags
Voir un exemple avec un top-margin

OriginalL'auteur tibo | 2012-08-08

  1. 13

    Cadratin (1 em est égal à 1 fois le nombre de pixels dans une taille de police. Donc, si votre font-size est 60px, cadratin (1 em = 60px. Si c'est 14px, cadratin (1 em = 14px, et ainsi de suite. Réglage de la line-height de cadratin (1 em rend égal à 1 fois le nombre de pixels.

    Il peut y avoir une certaine confusion, car la valeur par défaut hauteur de la ligne définie par l'utilisateur de l'agent de la feuille de style est habituellement quelque part autour de 1,5 em, donc un 12px font-size entraînerait une 18px line-height.

    em unité

    Égale à la valeur calculée de la "police-taille" de la propriété de l'
    l'élément sur lequel il est utilisé

    Source: http://www.w3.org/TR/css3-values/#font-relative-lengths

    Voir aussi: http://www.w3.org/TR/CSS21/syndata.html#length-units

    Sur cette base, l'original de votre exemple est exactement ce à quoi je m'attends à voir. Pour référence, voici ce que je vois dans Chrome:

    La Hauteur de la ligne ne correspond pas à la taille de police

    Votre première ligne est 60px de haut, mais la valeur calculée (W3 terme), la deuxième est 14px (dicté par la classe qui lui est appliquée). Les deux ont un line-height de cadratin (1 em. Ainsi, la line-heights sont 60px et 14px respectivement. Puisque c'est la même que la taille de la police, les deux lignes de touche (cela peut varier de la police à la police).

    Si vous voyez chevauchement de comportement, c'est un autre problème.

    Pour changer le comportement, vous pouvez utiliser une ligne de hauteur, le rembourrage, la marge, etc. Comme une note de côté, rem parts peut être plus intuitif si manque d'appui dans les navigateurs plus anciens.

    Pour une vue d'ensemble des unités de soutien, voir: http://css-tricks.com/css-font-size/

    Polices qui ne sont pas alignés avec les bords de la boîte de

    Mise À Jour De Question/Problème

    La Hauteur de la ligne ne correspond pas à la taille de police

    En ce qui concerne la mise à jour de la question, voir: http://www.w3.org/TR/css3-fonts/#propdef-font-size qui stipule que:

    Noter que certains glyphes peuvent saigner à l'extérieur de leur zone EM.

    Ce qui s'est passé, à des degrés divers avec différentes polices que j'ai essayé (certains saigner la fois sur X/Y, certains dans un sens, d'autres pas du tout).

    Je ne suis pas sûr qu'il y est une manière de changer ce comportement, en particulier étant donné que chaque navigateur peut utiliser un algorithme différent pour l'anti aliasing qui peut modifier légèrement le bord du caractère.

    Je pense line-box-contain: glyph peut être pertinent, mais je ne vois mentionné dans un éditeur de projet et je suis sûr que la prise en charge du navigateur est absent/incohérent.

    http://dev.w3.org/csswg/css3-linebox/#line-box-contain

    Je voudrais généralement conseillé d'éviter citant instable EDs, sauf s'ils sont la seule et la plus pertinente des ressources. Envisager le moins souvent changé de WD w3.org/TR/css3-values/#font-relative-lengths ou mieux encore la stabilité de la recommandation w3.org/TR/CSS21/syndata.html#length-units Bien que em unités sont probablement pas va changer à jamais, c'est toujours une bonne idée de lien vers des ressources plus stables 🙂
    Mis à jour pour utiliser vos liens. Merci.
    Je comprends ce que em moyens. Le truc, c'est que la police semble être plus grand que 60px car elle empiète sur la deuxième ligne. J'ai édité mon post.
    désolé pour le tutoriel puis...ce n'était pas clair à partir de votre premier post, ce que tu voulais. Le rendu semble varier en fonction des polices de caractères, certaines rendu légèrement à la verticale à l'extérieur de la zone, certains horizontalement. Je ne sais pas si il y a une meilleure explication que la taille de la police n'est pas exactement conforme à la box, ils sont censé (faire un peu de recherche).
    Merci pour vos mises à jour, Il semble être un système de navigation question, peut-être sur mac la police est un peu différent et les chevauchements... Qui suce! 🙁

    OriginalL'auteur Tim Medora

  2. 1

    Augmentation de la hauteur de la ligne dans votre CSS

    line-height: 2em; (De 1 à 2em)

    Qui est dans le p élément.

    OriginalL'auteur Legolas Greenleaf

  3. 0

    Vous pouvez donner à votre "test" de la classe de hauteur de la ligne ou de la marge-haut tout ce que vous sentez à l'aise avec.

    .test{
    font-size: 14px;
    line-height:18px;
}
    Ça ne résout pas mon problème. J'ai besoin de la police pour être exactement dans l'em-box, si je corrige pour google chrome sur mac, la hauteur de la ligne sera trop grand pour d'autres plate-forme (google chrome sur windows ou firefox sur mac par exemple)
    peut-être que vous pouvez essayer de donner margin-top de la classe test. jsfiddle.net/3WcMG/12

    OriginalL'auteur Mak

  4. 0

    La valeur par défaut de la hauteur de ligne est de taille relative, de 150% de la taille de la police dans un p par exemple. Si vous modifier la hauteur de ligne à l'aide de em ou %, le navigateur va interpréter cela comme un "em/% par rapport à la taille de la police."

    http://jsfiddle.net/P7LaP/

    <div class="small">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="normal">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>
<div class="large">
    <p>Normal pq</p><br/>
    <p class="short">Short pq</p><br/>
    <p class="tall">Tall pq</p><br/>
</div>

    L'exemple a trois ensembles de trois balises p avec une hauteur normale, courte, et de grande taille. Alors que les trois ensembles sont la taille de la police.

    p {
    color: ffffff;
    background: #777777;
}
.short { line-height: 1em; }
.tall { line-height: 2em; }
.small { font-size: 8px; }
.normal { font-size: 16px; }
.large { font-size: 32px; }

    J'espère que cette aide. Je ne suis pas sûr exactement ce que vous essayez de faire, mais il semble que vous devriez vous suffit de supprimer la ligne-ligne de hauteur à partir de votre feuille de style.

    OriginalL'auteur Steven Lacks