¿Por qué No altura igual a altura dentro de ella cuando DOCTYPE es XHTML 1.0 estricto?

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

  •  11-09-2019
  •  | 
  •  

Pregunta 

<!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 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é pasa? ¿Cómo puedo hacer que funcione con el DOCTYPE?

¿Fue útil?

Solución

Nota: esto probablemente depende del navegador
. El tamaño del elemento en bloque (td, div, etc.) si no se especifica sólo será tan grande como sea necesario, de acuerdo con el espacio ocupado por su contenido. Si se especifica, se tratará de ampliar en consecuencia, excepto si el contenido es más grande, en cuyo caso se ampliará cuando sea necesario.

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

Es posible que desee utilizar este estilo: 

line-height: 1px;

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

Otros consejos

Añadir un bloque estilo con esta regla 

td img {display: block;}

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

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

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

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

table { empty-cells: show; }

en el CSS, aunque no creo que IE6 soporta. La forma más compatible con los estándares es utilizar un espacio duro: 

<td>&nbsp;</td>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top