HTML5 Doctype daña las alturas DIV?

Al renderizar una página en Chrome, Safari o Firefox en Mac, si uso el tipo de documento HTML 5HTML5 Doctype daña las alturas DIV?

<!DOCTYPE html>

y poner una imagen dentro de un div, el div se rinde siempre de 4 píxeles demasiado alto. Si utilizo el tipo de documento más antiguo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Los divs son representados correctamente, que es la misma altura que la imagen en su interior. Esto está usando exactamente el mismo código HTML y CSS. Lo único que cambia es el tipo de documento y aparecen 4 píxeles adicionales. ¿Hay alguna forma de arreglar esto?

Fuente

2011-07-14 Jarrod Ballou

debería echar un vistazo a html5reset.org – Catfish

HTML5 especifica que se debe representar el espacio en blanco dentro de los elementos. Por lo tanto, obtienes 4px extra, si configuras el tamaño de fuente para esos elementos en 0, por ejemplo, el espacio desaparecerá.

Fuente

2011-07-14 21:10:47 Johan

En realidad, no tiene nada que ver con HTML5. Es el "modo estándar" frente a "no". 'font-size: 0' funciona para arreglarlo, pero no es la solución habitual. – thirtydot

Esto no es cierto, no estoy seguro de por qué obtuvo 3 votos. La respuesta a continuación es válida. – MMM

http://hsivonen.iki.fi/doctype/

<!DOCTYPE html> = Modo Normas - http://jsbin.com/ogacor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> = Casi Modo Normas - http://jsbin.com/ogacor/2

Para solucionarlo, añadir display: block o vertical-align: top (o bottom) a la img.

La razón de que esto ocurra en el primer lugar es que img s son por defecto inline elementos, y tienen un defecto de vertical-alignbaseline. La línea de base no toca la parte inferior del elemento contenedor; el espacio es la distancia entre los dos.

Ver:

Fuente

2011-07-14 21:22:13 thirtydot

HTML5 Doctype daña las alturas DIV?

Respuesta

Cuestiones relacionadas