¿Por qué HTML5 ignora la altura de línea más pequeña que el tamaño de letra?

Estoy cambiando algunas páginas a HTML5, que contiene titulares que deben establecerse con una altura de línea realmente pequeña. Ahora desde <!DOCTYPE html> se ignora cualquier altura de línea debajo del tamaño de fuente. Puedo espaciarlos todo lo que quiera, pero no hay posibilidad de acercarlos más. ¿Alguien sabe por qué es eso y si es curable?
Gracias, thomas¿Por qué HTML5 ignora la altura de línea más pequeña que el tamaño de letra?

Editar: Found it. Mi marca anterior era <a style="line-height:12px;" href="#">something</a> que funcionaba en XHTML 1.0 de transición pero no en HTML5.
Lo cambié a <div style="line-height:12px;"><a href="#">something</a> ¡eso funciona!
Gracias!

Fuente

2011-02-16 thomas

¿Está seguro de que un tipo de documento no HTML5 no desencadena el mismo comportamiento? – BoltClock

Estoy bastante seguro de que esto también depende del navegador y no es un comportamiento general de HTML5. – Nick

¿Cómo estás configurando la altura de tu línea? (¿Y qué navegador está usando?) –

Su etiqueta <a> es un elemento en línea y aparece en los elementos en línea HTML5 aplazar hasta línea de altura de su elemento padre 'bloque' (o todo el camino hasta el estilo <body> si ese es el padre inmediato) .

Ejemplo:

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

y este marcado:

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

La etiqueta <a> tendrá una línea de la altura de 20 píxeles no 12 píxeles.

Por lo tanto, su 'en línea' <a style="line-height:12px;" href="#">something</a> no funcionó, pero lo hizo cuando lo colocó en el elemento 'block'-level <div> porque los elementos de bloque pueden dictar la altura de la línea.

Una mejor manera que hinchar su marcado envolviendo su elemento en línea en un elemento de bloque, simplemente use CSS para hacer que la etiqueta muestre 'inline-block'.

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

Mejor aún, dar a su <a> una clase (cambio 'xx' de abajo para algo semántico):

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

Luego, en su archivo CSS establecer esa clase de 'inline-block':

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

Espero que ayude.

Fuente

2012-03-21 23:34:25 ucsarge

Una captura realmente agradable. ¿Puedes explicar por qué se ignora esta 'altura en línea' cuando es menor que el valor de los padres, a menos que el elemento hijo tenga 'displa: inline-block '? –

También me gustaría saber, especialmente porque no parece ignorarlo por completo, solo cuando la altura de la línea es menor que el tamaño de la fuente. – Chris

Esta respuesta me ayudó hoy. ¡Gracias! – Roger

¿Tiene algún código? ¿Tiene algún margen externo o márgenes?

Esto funciona para mí en Firefox, Chrome y 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>

Fuente

2011-02-16 14:37:57 Emily

Es necesario utilizar em tamaño del texto tan grande en IE8 e IE7 no compartirá la misma altura de la línea ... por ejemplo. usando 30px font-size:

Este ejemplo muestra que con un tamaño de texto de 30px, la altura de la línea en IE7 e IE8 no está a la par con Chrome y 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>

Este ejemplo muestra el uso em todos los navegadores muestran la misma línea height.em es un sistema viejo, aunque tenemos que usarlo hasta IE8 y a continuación se extingue. Es una buena práctica.

<!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>

Fuente

2011-02-16 16:23:05 Undefined

En mi comprensión, cada elemento de nivel de bloque tiene un carácter de ancho 0 llamado "puntal". Participará en el cálculo de la altura de la caja de línea. Cuando la altura de línea de los niños es más pequeña que la de los padres, parece que se ignora la altura de línea de los niños porque la altura de línea de los padres será la que contenga el cuadro de línea cuando la altura de línea de los niños sea menor.

Fuente

2017-09-07 07:16:48 xwchris

¿Por qué HTML5 ignora la altura de línea más pequeña que el tamaño de letra?

Respuesta

Cuestiones relacionadas