Pourquoi HTML5 ignorer la hauteur de la ligne de plus petite que la taille de police?


je suis passer quelques pages sur HTML5 qui contient des titres qui doivent être définis avec une très petite hauteur de la ligne. Maintenant, depuis <!DOCTYPE html> toute la hauteur de la ligne en dessous de la taille de police est ignoré. Je peux l'espace de sortir tout ce que je veux, mais aucune chance de les rapprocher.
Quelqu'un sait pourquoi c'est et si c'est cureable?

Merci,
thomas

Edit: Trouvé. Mon ancien balisage a été <a style="line-height:12px;" href="#">something</a> qui a travaillé dans XHTML 1.0 transitional mais pas en HTML5.

Je l'ai changé pour <div style="line-height:12px;"><a href="#">something</a> un qui fonctionne!

Merci!

  • Êtes-vous sûr que non doctype HTML5 ne déclenche pas le même comportement?
  • Je suis sûr que cela dépend aussi du navigateur et n'est pas un comportement général de HTML5.
  • Comment êtes-vous de la définition de votre ligne de la hauteur? (Et quel navigateur utilisez-vous?)
  • Dès que j'ai supprimer le Doctype HTML5 (ou la remplacer par XHTML 1.0 Transitional) ma hauteur de la ligne est correctement appliquée. Il est spécifié dans la feuille de style et testé sur Chrome et Firefox sur Linux et Mac.
InformationsquelleAutor thomas | 2011-02-16
  1. 45

    Votre <a> balise est un élément inline, et il semble en HTML5 éléments en ligne en remettre à ses parents "en bloc" de l'élément de la hauteur de la ligne ( ou tout le chemin jusqu'à la <body> style, si c'est le parent immédiat ).

    Exemple:

    body { line-height:20px; } 
a { line-height:12px; }

    et ce balisage:

    <body>
    <a href="#">test</a>
</body>

    La <a> tag aura une ligne de hauteur de 20px pas 12px.

    De sorte que votre 'inline' <a style="line-height:12px;" href="#">something</a> n'a pas fonctionné, mais a fait quand vous enveloppé dans le 'bloc'au niveau <div> élément, car les éléments de bloc peut dicter la hauteur de la ligne.

    Une meilleure façon que les ballonnements votre balisage par emballage de votre élément intégré dans un élément de bloc, il suffit d'utiliser le CSS pour faire de l'affichage de l'étiquette 'inline-block'.

    <a style="display:inline-block; line-height:12px;" href="#">something</a>

    Mieux encore, donner à votre <a> une classe (changement " xx " ci-dessous pour quelque chose sémantique):

    <a class="xx" href="#">something</a>

    Ensuite dans votre fichier CSS pour définir la classe de 'inline-block':

    .xx { display:inline-block; line-height:12px; }

    Espère que ça aide.

    • Une très belle prise. Pouvez-vous nous expliquer, pourquoi cette inline-height est ignorée si elle est plus petite que la mère de la valeur, à moins que l'élément enfant a `moniteur: inline-block'?
    • Je serais également intéressé de savoir, d'autant qu'il n'apparaît pas à l'ignorer complètement, uniquement lorsque la hauteur de la ligne est inférieure à la taille de la police.
    • Cette réponse m'a aidé aujourd'hui. Merci!
    • Explication claire, merci.
    InformationsquelleAutor ucsarge
  2. 2

    Vous avez un peu de code? Avez-vous du superflu et de rembourrage ou des marges?

    Cela fonctionne pour moi, dans Firefox, Chrome et IE8

    <!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
    InformationsquelleAutor Emily
  3. 0

    Vous devez utiliser em aussi grand taille du texte dans IE8 et IE7 ne sera pas partager la même hauteur de la ligne...par exemple à l'aide de 30px font-size:

    Cet exemple montre que, avec un 30px la taille du texte la hauteur de la ligne dans IE7 et IE8 ne sont pas sur pied d'égalité avec Chrome et FF. 

    <!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>

    Cet exemple montre l'utilisation d'em tous les navigateurs affichent la même hauteur de la ligne.em est un vieux système, bien que nous avons besoin de l'utiliser jusqu'à ce que IE8 et ci-dessous meurt. Il est bon de pratiquer. 

    <!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
    InformationsquelleAutor Undefined
  4. 0

    Dans ma compréhension, chaque bloc de niveau élément a une largeur-0 caractères appelés "jambe de force". Elle participera, dans le calcul de la ligne de la boîte de hauteur. Quand les enfants de la hauteur de la ligne est plus petit que parent,Il semble comme les enfants de la hauteur de la ligne est ignorée parce que le parent est la hauteur de la ligne va maintenir la zone de ligne, lorsque les enfants de la hauteur de la ligne est plus petit.

    InformationsquelleAutor xwchris