CSS avanzado 2y4p5p

1.2. La propiedad hasLayout de Internet Explorer 3y411k

Debido a que Internet Explorer es tan antiguo (ya que fue uno de los primeros navegadores disponibles), no ha tenido el lujo de comenzar de nuevo como lo hace el navegador actual. Con el paso del tiempo, Microsoft comenzó a adaptar nuevos motores para hacer uso de CSS. Parece correcto … Sin embargo, CSS cambia la suposición fundamental de que el motor de Internet Explorer se basa en que cualquier cosa importante es un rectángulo que contiene todo su contenido.

Entonces, para lidiar con los nuevos estándares de CSS, Microsoft decidió reparar su antiguo motor implementando la propiedad hasLayout, en lugar de reconstruir IE. Todos los elementos en Internet Explorer ahora tienen una propiedad hasLayout. Dependiendo del elemento, se establece en verdadero o falso de forma predeterminada. Si hasLayout se establece en verdadero, el elemento es un cuadro independiente que se encarga de representarse a sí mismo. Si es falso, entonces el elemento se basa en un elemento padre que tiene hasLayout establecido en verdadero para representarlo. Aquí es donde la mayoría de los errores de IE cobran vida.

El navegador Internet Explorer 7 y sus versiones anteriores (Actualmente estamos en la version de Internet Explorer 11, el cual ha subsanado muchos de los errores que ha continuacion se cita. Creo que fue necesario dejar esta informacion en este curso para ver la evolucion que ha tenido este navegador durante estos años) incluyen decenas de errores relacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicas que aprovechan otros errores o características del navegador. Además, muchos errores se solucionan gracias a la propiedad hasLayout de Internet Explorer.

En efecto, muchas soluciones de los errores de Internet Explorer consisten en "forzar a un elemento a que tenga un layout". El motivo es que para mostrar los elementos de una página, el navegador Internet Explorer divide a todos los elementos en dos grupos:

Los elementos cuyo tamaño y posición dependen de su elemento contenedor.
Los elementos que establecen su propio tamaño y posición.

La mayoría de elementos de una página son del primer tipo, ya que sus elementos contenedores (normalmente el elemento <body>) determinan su tamaño y posición. Los elementos del segundo tipo son los que Internet Explorer considera que tienen un layout.

Los elementos HTML que por defecto tienen un layout en Internet Explorer son:

<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>

No obstante, algunas propiedades CSS provocan que el elemento tenga un layout y por tanto, activan la propiedad hasLayout. La siguiente tabla muestra todas las propiedades CSS y valores que hacen que un elemento tenga un layout:

Propiedad	Valores que activan la propiedad hasLayout	Comentarios
`position`	`absolute`, `fixed`	`fixed` sólo en Internet Explorer 7
`float`	`left`, `right`
`display`	`inline-block`
`width`	Cualquier valor que no sea `auto`
`min-width`	Cualquier valor	Sólo en Internet Explorer 7
`max-width`	Cualquier valor	Sólo en Internet Explorer 7
`height`	Cualquier valor que no sea `auto`
`min-height`	Cualquier valor	Sólo en Internet Explorer 7
`max-height`	Cualquier valor	Sólo en Internet Explorer 7
`zoom`	Cualquier valor que no sea `normal`
`writing-mode`	`tb-rl`
`overflow`	`hidden`, `scroll`, `auto`	Sólo en Internet Explorer 7

Las propiedades zoom y writing-mode no se definen en ningún estándar de CSS porque son propietarias del navegador Internet Explorer. Si se utilizan estas dos propiedades, la hoja de estilos no pasa satisfactoriamente el proceso de validación.

Para quitar el layout a un elemento, es necesario establecer el valor por defecto de todas las propiedades de la tabla anterior que hayan sido modificadas:

width: auto, height: auto
max-width: auto, min-width: auto
position: static
float: none
overflow: visible
zoom: normal
writing-mode: lr-tb

Utilizando alguna de las propiedades CSS anteriores se han ideado numerosas soluciones para forzar a que un elemento tenga un layout. Uno de los trucos más conocidos desde hace muchos años es el famoso Holly hack que soluciona un problema con un elemento posicionado de forma flotante aplicando la siguiente regla:

.selector {
  height: 1%;
}

En el navegador Internet Explorer 6 se puede utilizar el truco del guión bajo y la propiedad height para forzar a un elemento a que tenga layout:

.selector {
  _height: 1%;
}

En Internet Explorer 7 se puede utilizar la propiedad min-height utilizando cualquier valor, incluso el 0:

.selector {
  min-height: 0;
}

Otra propiedad muy utilizada en Internet Explorer 7 es zoom, aunque no es una propiedad estándar de CSS:

.selector {
  zoom: 1;
}

En las próximas secciones se presentan algunas técnicas que requieren forzar a que un elemento tenga layout en Internet Explorer en las antiguas versiones. Como dije al principio de este capitulo crei que era necesario saber los errores que tenia este navegador en el principio. En la actualidad la mayoria ha sido subsanado.