style - table html
¿Por qué<td> altura no es igual a<img> altura dentro de ella cuando DOCTYPE es XHTML 1.0 Strict? (3)
Agregue un bloque de estilo con esta regla
td img {display: block;}
y vea https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps para obtener una explicación completa.
<!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
He sabido que es causado por DOCTYPE, porque borrar esa parte lo hará normal:
Entonces, ¿qué pasa? ¿Cómo puedo hacer que funcione con el DOCTYPE?
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.
Puede usar este estilo:
line-height: 1px;
Esto establece la altura de la línea en 1px. Line-height no es un elemento, por lo que la regla anterior no se aplica.
el fondo no es un atributo estándar para elementos TD es la razón. En su lugar use:
style="background: url(/path/to/image.png);"
En cuanto a su imagen de 1 píxel, supongo que esto es simplemente para hacer que aparezca la celda de la tabla. Si es así, esa no es la forma recomendada de hacerlo. Usted puede hacer:
table { empty-cells: show; }
en CSS, aunque no creo que IE6 lo respalde. La forma más compatible con los estándares es usar un espacio sin interrupción:
<td> </td>