imagen - img html atributos

html5 problema de espacio vertical con<img>

Question

Estoy tratando de crear un diseño en el que el espaciado vertical entre divs sea píxel perfecto. Hasta ahora he descartado casi todos los grandes sistemas de red (960.gs, Blueprint), porque no tienen ninguna solución para los espaciamientos verticales. Con ellos, la única manera de establecer el espaciado vertical entre divs es usar el atributo body {line-height} y manipular el espaciado div usando eso. No llamaría a eso una solución, ya que arruina tu plantilla, depende de la familia de fuentes y no te permite usar diferentes espaciamientos para diferentes divs.

El único sistema de cuadrícula que encontré que tiene soporte adecuado para el espaciado vertical es Golden Grid , que no usa cuerpo {line-height}, pero tiene su propio .clear {height: 5px} para el espaciado vertical.

Mi problema es que no importa cómo lo intente, no puedo hacer que el espaciado funcione en HTML5. Estoy hablando de imágenes dispuestas verticalmente sin espacio entre ellas. En el modo de transición XHTML, todo funciona perfectamente, las imágenes se alinean perfectamente, pero cuando están en el modo HTML5, tienen una brecha vertical entre ellas. La brecha es 2px en Chrome y 2-3 px en Firefox, alternando entre líneas. Creo que es el caso con cada sistema de cuadrícula cuando se utiliza en el modo HTML5. No sé cuál es la mejor manera de escribir este código en HTML5 simple, así que solo probé sistemas de cuadrícula. La brecha vertical está presente en 960.gs, Blueprint también.

Una solución que descubrí podría ser establecer body {line-height: 0} y definir line-height en cada etiqueta tipográfica. Pero no entiendo por qué se necesitaría un hack tan malo para un caso tan simple: imágenes dispuestas verticalmente. ¿Por qué los navegadores son diferentes en el modo HTML5 que en el modo de transición XHTML?

Aquí, tengo la misma página, nada cambió, solo el doctype. El XHTML one es un píxel perfecto en todos los navegadores, el HTML5 tiene la brecha y es diferente de un navegador a otro.

¿Cuál es la mejor manera de hacer que el ejemplo HTML5 funcione como el XHTML transitional?

ACTUALIZACIÓN : treintadot respondió el problema, si incluyo img {display: block; } la versión HTML5 se comporta exactamente igual que la XHTML Transitional. ¡Gracias treintadot!

Pero antes de cerrar este hilo, ¿puede alguien explicarme por qué es eso?

• ¿Por qué todos los navegadores se comportan de manera diferente en el modo HTML5 y todos tienen diferentes espacios verticales entre los elementos img, cuando no se especifican como pantalla: bloque? Eche un vistazo en un sitio de comparación de navegadores para el enlace html5 anterior, será diferente de un navegador a otro. Tienen espacios entre 2 a 4 px.
• ¿Por qué XHTML Transitional no necesita este hack?
• ¿Por qué XHTML Strict también produce una brecha vertical?
• ¿Es seguro usar img {display: block; } en una hoja de reset.css?

Answer 1

¿Por qué todos los navegadores se comportan de manera diferente en el modo HTML5 y todos tienen diferentes espacios verticales entre los elementos img, cuando no se especifican como pantalla: bloque?

En primer lugar, los navegadores no tienen un "modo HTML5". Lo que tienen son tres modos "Pecares", "Pistas limitadas" (también conocido como Casi Estándares) y modo "Estándares". Solo hay una diferencia entre los modos "Limitaciones limitadas" y "Estándares" y se relaciona con la forma en que se establece una altura de línea y una línea de base para el cuadro de línea en el que se encuentra <img> . En el modo "Limitaciones limitadas", si no hay contenido de texto representado en la línea, entonces no se establece una línea de base y <img> encuentra en la parte inferior del cuadro de línea.

En el modo "Estándares", el cuadro de línea siempre contiene el espacio para los descendientes de caracteres como g, pyey debajo de la línea de base, incluso si no hay caracteres reales en ese cuadro de línea. El espacio que se ve es la distancia entre la línea de base. y la parte inferior del cuadro de línea que es el espacio para esos descendientes. Para obtener una descripción detallada, visite http://msdn.microsoft.com/en-us/library/ff405794%28v=vs.85%29

El remedio, entonces, es evitar que <img> sea ​​tratado como un elemento en línea { display:block; } { display:block; } o para anular la alineación vertical de <img> { vertical-align:bottom; } { vertical-align:bottom; } . Cualquiera funcionará.

¿Por qué XHTML Transitional no necesita este hack?

El uso del doctype XHTML Transitional coloca el navegador en modo "Limitaciones limitadas". Si hubiera usado XHTML Strict, o un completo tipo de documento HTML4 Strict, habría visto los mismos huecos que observa con el tipo de documento HTML5 en cada uno de estos lugares en el modo "Estándares" del navegador.

¿Por qué XHTML Strict también produce una brecha vertical?

Véase más arriba.

¿Es seguro usar img {display: block; } en una hoja de reset.css?

Por supuesto, pero probablemente habrá ocasiones en las que querrá que <img> se trate como un elemento en línea. En esos casos, deberá agregar CSS en los lugares apropiados para lograrlo.

Answer 2

La vertical-align: baseline está causando el espacio en la parte inferior de sus imágenes.

En los tipos de documento estrictos, las imágenes son elementos en línea y se comportan como texto. Al alinear los elementos en línea en la línea de base, dejan espacio para los descendientes de texto, incluso si no hay texto.

Añadir img { vertical-align: bottom } a tu hoja de estilo de reinicio solucionará el problema.

Answer 3

Prueba este código:

<html>
<head>
<style>
div, span { border:1px dotted; height:100px; width:100px; }
</style>
</head>
<body>
<span>100px</span>
<div>100px</div>
</body>
</html>

Cuando considera que <img> es un elemento en línea como <span> ... Creo que la mayoría de sus preguntas tienen respuesta.

Sin los atributos de ancho / alto, depende del motor de renderización de cada navegador para que sea idéntico (no lo son). Por lo tanto, Pixel Perfect no funcionará hasta que le digas a los navegadores cuántos píxeles usar.

Answer 4

Siento que esta no puede ser la respuesta que estás buscando. Es demasiado corto:

Agregue al CSS de su página HTML5: img { display: block } .

Probando en Firefox y Chrome, haciendo que se obtenga una representación idéntica de píxeles perfectos entre tus dos páginas.