DOCTYPE estricto que afectan el espaciado entre las imágenes

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

Pregunta

Estoy teniendo problemas con mi imagen espaciado cuando me cambié a XHTML DOCTYPE Estricto.

El siguiente código que utiliza Yahoo restablecer la hoja de estilos para matar a toda navegador por defecto de relleno - deja un espacio de aproximadamente 4 píxeles entre las dos imágenes de abajo, pero SOLO cuando uso el doctype estricto.¿Por qué es esto?

Es sólo un problema en Chrome y Firefox.Es decir no muestra un solo píxel entre las dos imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>
¿Fue útil?

Solución

El uso de la respuesta de Pedro en el inicio de la siguiente soluciona el problema:

img { vertical-align: bottom }

La razón por la que esto funciona es que el valor predeterminado para vertical-align es baseline, lo que equivale a la parte del texto "sobre la línea", donde el dangly bits de colgar (con minúscula g, q, etc todo para pasar por debajo de la línea de base).

Así que para salir de la sala fue dejando 4px de espacio para estos voladizos.

La esperanza que tenía sentido.

Editar:Ayuda Visual de sitio de origen
alt text
(fuente: brightlemon.com)

Otros consejos

Puede encontrar más información sobre las misteriosas brechas de imagen aquí:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

El uso de Firebug muestra que es el DIV el que causa el espacio, en lugar de la imagen.

Configuré el tamaño de fuente: 0; para el div superior y la brecha desaparece.

(Curiosamente, hay / debe haber un tamaño de fuente heredado: 0; del cuerpo en reset-min.css, así que no estoy seguro de por qué funcionó).

En doctypes estrictos, la imagen se convierte en un elemento en línea y se comporta como el texto. Por lo tanto, debe cambiar su propiedad vertical-align o cambiar su propiedad de visualización a display: block o display:inline-block

Intentando descartar errores comunes, realicé la validación de aprobación del código arreglando no menos de 8 errores de validación.

Generalmente, si un navegador no puede analizar el documento en el DOCTYPE proporcionado, los resultados no se especifican.

Todavía no funciona, pero aquí está el código de validación: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <link rel="stylesheet" type="text/css" 
     href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

La solución display: inline-block definitivamente no funcionó para mí.

La solución vertical-align: bottom funcionó, pero con una advertencia: dependiendo de la situación, había imágenes que tuve que establecer en vertical-align: top

Cambiar a estándares sueltos en lugar de estrictos funcionó para mí ... mantuvo el formato de IE que necesitaba, pero eliminó el espaciado de imagen extraño en Firefox y Chrome.

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode

Usó la línea: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top