Aspectos destacados del hack de CSS

¡Todas las ideas de este artículo provienen de Internet y de su propia práctica!

Entorno de prueba: modo de documento IE5 / IE7 / IE8 / IE9 / IE10 / Edge

(1) La marca \ 0   se usó cuando era compatible con IE10 e IE9 al hacer el formulario de inicio de sesión

       Escenarios de uso: IE8, IE9, IE10, Edge , IE11 (otra información muestra que funciona)

.name{
  color:red;
  color:pink\0;//\0紧贴pink,否则IE8失效
}

(2) \ 9   ( <meta http-equiv = "X-UA-Compatible" content = "IE = Edge" />  puede afectar los resultados )

    Escenarios de uso: IE5, IE7, IE8, IE9, IE10

.name{
  color:red;
  color:pink\9;
}

（3）+

    Escenario de uso: <= IE7

.name{
  color:red;
  color:pink\9;
  +color:blue;
}

（4）_

    Escenario de uso: IE6

.name{
  color:red;
  color:pink\9;
  _color:blue;
}

（5）*

    Escenarios de uso: IE6, IE7

.name{
  color:red;
  color:pink\9;
  *color:blue;
}

Resumen: s significa Modo estándar significa modo estándar, Q significa Modo Quirks significa modo de compatibilidad.

cortar a tajos	Ejemplo	IE6 (S)	IE6 (Q)	IE7 (S)	IE7 (Q)	IE8 (S)	IE8 (Q)
*	*color	Y	Y	Y	Y	norte	Y
+	+ color	Y	Y	Y	Y	norte	Y
-	-color	Y	Y	norte	norte	norte	norte
_	_color	Y	Y	norte	norte	norte	norte
#	#color	Y	Y	Y	Y	norte	Y
\ 0	color: rojo \ 0;	norte	norte	norte	norte	Y	norte
\ 9	color: rojo \ 9;	Y	Y	Y	Y	Y	Y

（6）! Importante

cortar a tajos	Ejemplo	IE6 (S)	IE6 (Q)	IE7 (S)	IE7 (Q)	IE8 (S)	IE8 (Q)
!importante	color: rojo! importante;	norte	norte	Y	norte	Y	norte

(7) Declaración de comentario condicional (IE)

    Escenario de uso:> IE5 Palabras clave: gt:> lt: <gte:> = lte: <=!: Otras versiones

<!--[if IE]>所有IE<![endif]-->
<!--[if IE 7]>IE7<![endif]-->
<!--[if gt IE 9]>大于IE9<![endif]-->
<!--[if lte IE 9]>小于等于IE9<![endif]-->
<!--[if !IE 9]>除了IE9<![endif]-->

(8) modo de renderizado unificado mate

    Escenario de uso: X-UA-Compatible es un metaatributo propietario de IE8, que le dice a IE8 qué versión usar para representar la página, porque cuando IE8 se lanzó por primera vez, muchas páginas web no se podían adaptar a los navegadores de versiones superiores, por lo que apareció este atributo para forzar IE8 Render en modo de versión baja;

    Se recomienda la siguiente configuración: IE = edge, use el último motor para renderizar la página; chrome = 1 puede activar Chome Frame

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>

    ¿Qué es Chome Frame? (Google anunció el fin del soporte en enero de 2014)

        Nombre chino: Google Chrome Embedded Frame, un complemento gratuito para Internet Explore lanzado por Google. Chrome Frame utilizará la última versión del kernel de webkit chome y el motor Javascript para inyectar en IE, y utilizará el motor de webkit de Chrome para procesar páginas web, de modo que IE admita versiones superiores de tecnología web.

        Compatibilidad: IE6, IE7, IE8, IE9

        Uso: ¿Quiere que el navegador IE inicie Chrome Frame para representar páginas web? Paso 1 , IE instala el Chrome Frame plug-in, el paso 2 , (como usuario) || modificación del registro (como desarrollador) añadir http cabecera meta a la página web, conjunto de cromo = 1 para abrir

 （9）pantalla @media {} 

      Escenario de uso:> = IE9

@media screen {
    .name{
        color: red;
        color:blue\9;//IE9 IE10识别这个
    }
}

（10）@supports (no (-ms-accelerator: true)) {}

        Escenario de uso: navegador que no es IE

@supports (not (-ms-accelerator:true)) {
　　 .name{
　　　　color:red;
　　}
}

 (11) atributo -ms-high-contrast en @media (no lo he usado, e IE10 rara vez tiene problemas de compatibilidad)

    Escenario de uso: IE10 IE10 admite la consulta de medios y luego también admite el atributo -ms-high-contrast, así que úselo para piratear IE10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* IE10-specific styles go here */
}

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}

(12) @cc_on (no usado) usa la compilación condicional privada de IE + comentarios condicionales para proponer un truco contra IE10

<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

Nota: CSS se analiza de arriba a abajo, y los que no se reconocen se ignoran. El orden de escritura es: color ---> + color ---> _ color versión alta a versión inferior

referencia:

(1) Utilice CSS Hack de \ 0 con precaución

(2) ¿Qué es el hack de CSS? Introducción al hack de CSS del navegador IE6 \ 7 \ 8 \ 9 \ 10

(3) IE10 CSS Hack (por cierto, hable sobre IE11 CSS Hack)