1. "El uso de importante en IE6 y FF"
.box1 {ancho: 150px! Importante;}
.box1 {ancho:250px;}
Importante significa que esta configuración tiene prioridad. IE no cometerá ningún error cuando encuentre! Importante y simplemente ignorará su función. Si el ancho se establece más tarde, IE tomará el último ancho establecido como criterio. Utilizará el valor actual, que es el valor importante anterior. Por ejemplo: #test {ancho: 300px! Importante}Tanto IE como FF muestran 300PX. Si hay un valor al final, IE mostrará el siguiente valor y FF mostrará el valor con !import al frente.
Otros navegadores lo consideran importante. Debido a la relación de prioridad, siempre prevalece el ancho previamente establecido.
#prueba {ancho:300px;ancho:400px!importante;}
El resultado que se muestra en esta oración es que el ancho de IE y FF es 400PX
#prueba {ancho:300px!importante;ancho:400px;}
El resultado de visualización de esta oración es FF: 300px IE: 400px
Por lo tanto, cuando utilice !important, coloque las palabras que contengan !important delante.
Pero el problema vuelve a aparecer: ¡IE7 ya puede reconocer! Importante, ¡consulte a continuación!
2. Estilos CSS para Firefox ie6 ie7
Hoy en día, la mayoría usa !important para piratear. Las pruebas de ie6 y Firefox pueden mostrarse normalmente, pero ie7 puede interpretar !important correctamente, lo que hará que la página no se muestre como se requiere. Encontré un buen truco para IE7 usando "*+html". Ahora navegue con IE7 y no debería haber ningún problema.
Ahora escribe un CSS como este:
#1 { color: #333 } /*Moz */
* html #1 { color: #666 } /* IE6 */
*+html #1 { color: #999 } /* IE7 */
Luego, el color de fuente se muestra como #333 en Firefox, #666 en IE6 y #999 en IE7. Puede usar "+" para implementar CSS Hack que solo es reconocido por IE. Algunos amigos pueden pensar en usar "_" Hack. , pero se distinguen porque "_" no se reconoce en IE7. Así que usa +
Resultados de la prueba:
Los navegadores IE5.5, IE6 e IE7 pueden reconocerlo;
Los navegadores FF2.0, Opera 9 y Safari 2 no lo reconocen.
3. Hackear IE7
IE7 ha corregido muchos errores y ha agregado soporte para algunos selectores, por lo que ahora los trucos para ocultar o mostrar IE como *html {}, html>body {},! Importante, etc. no funcionarán en IE7. Aunque no se recomienda CSS Hack y los comentarios condicionales son un filtro infalible, los comentarios condicionales sólo pueden aparecer en HTML, por lo que CSS Hack todavía tiene su lugar. Nanobot descubrió algunos CSS Hacks para IE7, específicamente:
>cuerpo
HTML*
*+html
De estos tres métodos de escritura, los dos primeros son métodos de escritura CSS ilegales y se ignoran en los navegadores compatibles con los estándares, pero IE7 no lo cree así. Para >body, reemplazará el selector que falta con el selector global *, es decir, se procesará en *>body, y este fenómeno también existe no solo para el selector >, sino también para los selectores + y ~. Para html *, dado que no hay espacio entre html y *, también es un error de sintaxis CSS, pero IE7 no lo ignorará, pero cree erróneamente que hay un espacio aquí. Para el tercer tipo *+html, IE7 cree que la declaración DTD delante de html también es un elemento, por lo que se seleccionará html. Entre estos tres métodos, solo este método es escritura CSS legal, lo que significa que puede pasar el validador. Por lo tanto, la verificación también es un truco recomendado por el autor.
Internet Explorer 6 y anteriores
Utilice * html {} para seleccionar el elemento html.
IE 7 y menos
Utilice *+html, * html {} para seleccionar el elemento html.
Es decir, sólo 7
Utilice *+html {} para seleccionar el elemento html.
IE 7 y navegadores modernos únicamente
Utilice html>body {} para seleccionar el elemento del cuerpo.
Sólo navegadores modernos (no IE 7)
Utilice html>/**/body {} para seleccionar el elemento del cuerpo.
4. IE y FF tienen diferentes interpretaciones del modelo de caja. Descripción del código: #test { width: 650px !important;width: 648px;padding-left:2px;background:#fff }
El ancho de banda mostrado por la prueba es 650px
El ancho total de IE Box es: la suma de los anchos de ancho + relleno + borde + margen. El ancho total de FF Box es el ancho de ancho, y el ancho de relleno + borde + margen está incluido en el ancho.
Si hay BOX{WIDTH:"300"; PADDING:"5PX";}, el ancho del BOX en IE debe ser: 310. El ancho de FF es 300, por lo que cuando se llena el BOX, debe usar BOX{WIDTH: "290"!IMPORTANT; WIDTH: "300";}, para garantizar que el ancho del BOX sea siempre de 300 px, y No habrá ningún fenómeno de estiramiento y en FF no habrá ninguna situación en la que la capa flotante no esté completamente llena.
5. La etiqueta ul tiene valor de relleno en Mozilla, pero solo el margen tiene valor en IE.
Establecer ul{margin:0;padding:0}
6. IE no puede distinguir la diferencia entre relación de herencia y relación padre-hijo. Todas son relaciones de herencia.
7. Configurar el relleno en un div en FF hará que el ancho y el alto aumenten, pero IE no (se puede resolver con! Importante).
8. Problema de centrado
1. Centrar verticalmente. Establezca line-height a la misma altura que el div actual y luego pase vertical-align: middle (tenga cuidado de no ajustar el contenido).
2. Margen centrado horizontalmente: 0 automático (por supuesto, no universal).
3. Si necesita agregar estilos al contenido de una etiqueta, debe configurar display: block (común en etiquetas de navegación)
4. La diferencia en la comprensión de BOX entre FF e IE genera una diferencia de 2 píxeles y problemas como que el margen de un div configurado para flotar se duplica en IE.\
5. Diferentes actuaciones de UL:
La etiqueta ul tiene estilo de lista y relleno de forma predeterminada en FF. Es mejor declararla con anticipación para evitar problemas innecesarios (común en etiquetas de navegación y listas de contenido).
6. No establezca la altura del div como un contenedor externo. Es mejor agregar desbordamiento: oculto para lograr la adaptación de la altura.
9. Con respecto al cursor de mano, solo se aplica a IE. Si tanto IE como FF lo reconocen, utilice cursor: puntero.