2010-06-01 9 views
8

Puede alguien por favor me explique por qué tener un tipo de documento dehtml doctype agrega espacios en blanco?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

y

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

hacer que el bloque siguiente manera diferente en Firefox?

<table style="border-collapse:collapse; margin:0; padding:0;"> 
    <tr> 
     <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td> 
    </tr> 
</table> 

usando 'Transición', no hay espacio en blanco debajo de la imagen, usando 'estricto' no es!

2da pregunta, usando strict, ¿es posible eliminar este espacio en blanco?

+0

¿Hay algún espacio en blanco oculto en su archivo? (¿Al igual que los espacios al final de una línea?) – John

+0

sin espacios en blanco ocultos. – pstanton

Respuesta

14

Como puede ver en this table, el primer modo peculiar de Doctype triggers en todos los navegadores, el second activará el modo estándar.

El resto de esta historia se continúa a Images, Tables, and Mysterious Gaps:

Setting images to be blocks

La primera opción, y uno que se trabajo para más gráficamente intensos diseños, es convertir la imagen a partir siendo un elemento en línea para un elemento de nivel de bloque . Haga eso, y ya no genera un cuadro de línea, por lo que el problema desaparece - asumiendo que la imagen es lo único que ocupa esa celda de la tabla. En el caso más simple , podríamos añadir un estilo así:

td img {display: block;} 
+0

Acabo de encontrar ese artículo también. +1 por ser más rápido. :) – edl

+0

por lo que la solución es agregar 'display: block;' en la imagen ... enmendar la respuesta y daré el tic! – pstanton

1

Mi sospecha es que el espacio en blanco dentro del marcado (por ejemplo, las nuevas líneas y las pestañas que hacen que el código de la tabla sea muy legible) tienen la culpa. Me he encontrado con problemas similares anteriormente, donde el espacio en el marcado resultaba en un espacio molesto en la pantalla, incluso donde parecía no importar (por ejemplo, entre las etiquetas <li>).

Intente contraer el marcado de la tabla en una sola línea larga.

+0

no, he probado esto sin espacio en blanco alguno.es como si el procesador agregara el espacio en blanco cuando usa el tipo de documento estricto. – pstanton

0

No estoy seguro de por qué se produce el espacio. En cuanto a una solución, si no le importa establecer explícitamente una altura para su celda de tabla, puede agregar display: block; y altura: 60px; a tus estilos de td.

0

La primera DOCTYPE hará que su página en almost standards mode:

modo

"casi estándar" renderizado partidos "normas" modo en todos los detalles a excepción de uno. El diseño de las imágenes dentro de las celdas de la tabla se maneja de la misma manera que funciona el modo "peculiaridades".

El segundo DOCTYPE mostrará su página en modo estándar.

Cuestiones relacionadas