¿Por qué <td > altura no igual a <img > altura dentro cuando DOCTYPE es XHTML 1.0 Strict?

<!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" lang="en" xml:lang="en"> 
<head> 
</head> 
<body> 

<table width="100%" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td align="right" colspan="5"> 
      <span class="validationInline">*</span> 
      <span class="hint">Required fields</span> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="5" background="http://media.monster.com.hk/bgr_8.gif"> 
      <img src="/static/cleardot.gif" height="1" width="1" /> 
     </td> 
    </tr> 
</table> 

</body> 
</html>

Puede verificarlo aquí: http://maishudi.com/tt2.html ¿Por qué <td > altura no igual a <img > altura dentro cuando DOCTYPE es XHTML 1.0 Strict?

He conocido es causada por DOCTYPE, debido a la supresión de esa parte hará que sea lo normal:

http://maishudi.com/tt.html

Entonces, ¿qué tiene de malo ¿Cómo puede? Lo hago funcionar con el DOCTYPE?

Fuente

2009-09-20 omg

En primer lugar, recomendaría reemplazar XHTML1.0 doctype con HTML4.01 estricto (consulte http://www.webdevout.net/articles/beware-of-xhtml para saber por qué esta es una buena idea) – kangax

Oh, no puedo, cambiar doctype me causará muchos otros problemas ahora. – omg

Le recomendaría que continúe usando XHTML Strict. Los requisitos más estrictos son una buena cosa en absolutamente todas las formas de desarrollo de software, excepto HTML. Eso dice mucho de lo que los programadores generalmente piensan sobre HTML y la competencia de aquellos que se ven obligados a escribirlo. Lo que el artículo de Kangax no dice es que es perfectamente válido enviar XHTML Strict como texto/html. Solo XHTML 1.1 requiere el tipo de aplicación/xml + xhtml mime. –

Nota: esto probablemente depende del navegador.
El tamaño del elemento de nivel de bloque (td, div, etc.), si no se especifica, solo será tan grande como sea necesario, según el espacio que ocupe su contenido. Si se especifica, intentará expandirse en consecuencia, excepto si el contenido es más grande, en cuyo caso se expandirá según sea necesario.

En su ejemplo, la celda contiene un solo carácter (el espacio sin interrupción), que toma el tamaño de una sola línea. Por lo tanto, el elemento de bloque debe tener al menos 1 altura de línea alta; no puede asumir un tamaño más pequeño. Esta es la razón por la cual su declaración de altura fue ignorada.

Es posible que desee utilizar este estilo:

line-height: 1px;

Esto ajusta la línea de altura de 1px. Line-height no es un elemento, por lo que la regla anterior no se aplica.

Fuente

2009-09-20 07:25:38 RichN

¡Funciona como el encanto! ¿Pero puedes explicar por qué la altura no tiene ningún efecto en td? – omg

Está basado en navegadores también. Algunos navegadores esperan contenido de texto dentro de los elementos. Esto también puede suceder con divs. –

Editado mi respuesta. – RichN

fondo no es un atributo estándar para elementos TD es la razón. En lugar de utilizar:

style="background: url(/path/to/image.png);"

cuanto a su imagen 1 píxel, supongo que esto es simplemente para que aparezca la celda de la tabla? Si es así, esa no es la forma recomendada de hacerlo. Puede hacer:

table { empty-cells: show; }

en CSS, aunque no creo que IE6 lo admita. La forma más compatible con los estándares es utilizar un espacio sin interrupciones:

<td>&nbsp;</td>

Fuente

2009-09-20 04:06:40 cletus

no funciona, puede verificarlo http://maishudi.com/tt3.html – omg

Añadir un bloque estilo con esta regla

td img {display: block;}

y ver https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps para una explicación completa.

Fuente

2009-09-20 09:39:38 Alohci

¡Perfecto! Gracias.... –

¿Por qué <td > altura no igual a <img > altura dentro cuando DOCTYPE es XHTML 1.0 Strict?

Respuesta

Cuestiones relacionadas