Cómo resolver problemas de compatibilidad de estilo CSS del navegador

Hay dos métodos:

1. En la misma hoja de estilos CSS, utilice !important para definir diferentes valores para Firefox e IE.

Ejemplo:

relleno: 20px !importante; /Para Firefox/

relleno: 10px /Para IE/

(Por favor Tenga en cuenta que IE6 no reconoce la etiqueta importante aquí, pero puede reconocer el relleno: 20px, por lo que debe agregar relleno: 10px para cubrir el relleno: 20px). Este método es adecuado para modificar una pequeña cantidad de código.

2. Comentarios condicionales. (Válido sólo para Internet Explorer) Este es también el método utilizado actualmente por el blog Arctic Ice Boy. Primero escriba sus propios estilos CSS para diferentes navegadores y luego agregue el siguiente código en el encabezado para adaptarlo a las llamadas de diferentes versiones de navegadores IE:

Nota:

gt: mayor que (alto en)

lte: menor o igual que (menor o igual que)

Además:

Esto no es Internet Explorer.

Esto es Internet Explorer.

IE tratará automáticamente el contenido de esta etiqueta como un comentario.

Información ampliada

Acerca de la compatibilidad con CSS y algunos problemas comunes

En la actualidad, la compatibilidad de los navegadores convencionales es relativamente buena. Lo siguiente se centra principalmente en la incompatibilidad. problema de IE6 y 7.

1. Si hay flotación, el cálculo debe ser preciso. No permita que el ancho y el alto del contenido excedan el ancho y el alto que configuramos. El contenido en IE6 se abrirá a la altura establecida.

Solución: agregue overflow:hidden al padre correspondiente; sin embargo, estará parcialmente oculto. Es mejor calcular con precisión el ancho y el alto antes de configurarlos.

2. En el elemento flotante en IE6, si el ancho requiere soporte de contenido, se debe agregar flotante dentro del elemento de bloque.

3. En IE6, si la altura de un elemento es inferior a 19 px, se considerará 19 px.

Solución: agregar overflow:hidden;