Los problemas de compatibilidad de IE6 deben considerarse en el diseño de la página web

La siguiente figura muestra la tasa de visualización del navegador en los detalles del visitante en el sistema de estadísticas del sitio web, y IE6 representa más del 40%. Aunque hay muchos tipos de navegadores, IE solo tiene muchas versiones como IE5.5, IE6, IE7, IE8, etc. Entre estas muchas versiones de alta gama, IE6 todavía es amada por la mayoría de los usuarios, por lo que al escribir, IE6 no se considera el problema de compatibilidad de IE6, de lo contrario perderá muchos visitantes.

Aquí hay 10 problemas a los que se debe prestar atención en IE6:

Debe agregar el tipo DOCTYPE en la parte superior de la página HTML. Por supuesto, vale la pena recomendar la versión estricta, por ejemplo:

<! Doctype html público -// w3c // dtd html 4.01 // es

http://www.w3.org/tr/html4/strict.dtd>

O, página xhtml! Doctype:

<! Doctype html público -// w3c // dtd xhtml 1.0 Strict // es

http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>

Lo último que desea ver es que IE6 ingresa al modo Quirk: en realidad hay suficientes peculiaridades.

Posición de configuración: Relativo resuelve más de un problema, especialmente al establecer la alineación. Obviamente, una cosa que debe entender es que el posicionamiento absoluto es relativamente hablando. Tal vez, porque no tienes una configuración, y no sabes que todo ha volado allí. Por ejemplo, si diseña cada artículo, hay una imagen ante él, y finalmente, encuentra que solo hay una imagen en la página, tal vez se superpongan.

Esto se origina en el famoso IE6 Double Margen Bug. Por ejemplo, si diseña flotando para un DIV y establece margen izquierda: 5px;, es probable que sea margen-izquierda: 10px en IE6. Aquí, establezca la pantalla: en línea para elementos flotantes para resolver el problema.

Muchos problemas de IE6 (o IE7) se pueden resolver estableciendo el valor HaslayOut. (Si no sabe qué es Playout, vea aquí)

La forma más fácil de establecer un valor HASHAYOUT para un elemento es agregar la altura o el ancho de CSS (por supuesto, el zoom también se puede usar, pero esto no es parte de CSS). Se recomienda establecer un valor específico, pero a veces no significa necesariamente que la altura lo sea. Aquí, puede usar la altura: 1%. Si el elemento principal no establece la altura, la altura física del elemento no cambiará, pero ya tiene la propiedad HaslayOut.

Un diseño complejo puede hacer que aparezca algún texto dentro de los elementos flotantes debajo de la posición flotante de limpieza. Este es un problema extraño, y lo siguiente puede ayudarlo a resolverlo:

• Asegúrese de que la pantalla: en línea esté configurada en el elemento flotante;

• Use margen-derecha: -3px en elementos flotantes;

• Agregue un comentario de IE después del último elemento del elemento flotante, por ejemplo: <!-[if! Es decir]> deja tu comentario aquí ... <! [Endif]->

• Agregue un DIV al último elemento (esto es establecer un ancho en 90% u otra altura similar)

ACTUALIZACIÓN: La forma más fácil es eliminar todos los comentarios. (Gracias a Tian Wei'er por su consejo, no lo he encontrado yo mismo, pero después de buscar en Google, descubrí que este método también se puede resolver, y este es un método recomendado).

Puede ver más explicaciones sobre esto en posicionisververything.net.

6. Solo use el flotador en la etiqueta <a>, IE6 solo admite la etiqueta <a> para mostrar el estilo de desplazamiento

Por supuesto, aún puede resolver este método a través de JS. Sin embargo, se trata de accesibilidad. Se recomienda no establecer contenido importante en Hover implementado usando JS.

Por ejemplo, Min-Alta puede evitar el uso de CSS para lograr la compatibilidad con IE.

#elemento {

Min-altura: 20em;

Altura: Auto! IMPORTANTE;

Altura: 20em; /* Deje que IE6 muestre esta altura*/

}

IE6 no puede identificar correctamente Min-Al-Alta. Puede establecer una altura fija para permitir que IE6 se resuelva a 20EM. Aun así, cambiará su altura debido al tamaño del contenido. Otra forma es usar selectores avanzados:

#elemento {

Min-altura: 20em;

Altura: 20em;

}

/ * Ignorar IE6 */

#Element [id] {

Altura: Auto;

}

La escala confundirá IE6 a menos que agregue una altura exacta al elemento principal. De lo contrario, agregue! Importante para los demás, por ejemplo:

cuerpo{

Margen: 2% 0! IMPORTANTE;

margen: 20px 0; /* Ie6 legible*/

}

No olvide probar temprano y probar con frecuencia a menos que su nivel se complete. De lo contrario, puede pasar más tiempo resolviendo problemas de IE6. En términos generales, si su sitio web puede funcionar bien bajo IE6 y Firefox, se estima que otros navegadores no tendrán ningún problema importante.

En muchos casos, resolver un problema puede llevar más tiempo que refactorizar su código.