"_" es uno de los métodos de prefijo de atributo intraclase del hack de CSS y es un hack exclusivo de IE6. Hablemos del hack de CSS en detalle.
Hack CSS Porque los navegadores de diferentes fabricantes, como Internet Explorer, Safari, Mozilla Firefox, Chrome, etc., o diferentes versiones de navegadores del mismo fabricante, como IE6 e IE7, tienen una comprensión diferente de Análisis de CSS Son exactamente iguales, por lo que los efectos de página generados serán diferentes y no obtendremos los efectos de página que necesitamos. En este momento, necesitamos escribir CSS diferente para diferentes navegadores para que pueda ser compatible con diferentes navegadores al mismo tiempo y obtener los efectos de página que queremos en diferentes navegadores.
En pocas palabras, el propósito del hack de CSS es hacer que su código CSS sea compatible con diferentes navegadores. Por supuesto, también podemos usar CSS Hack para personalizar y escribir diferentes efectos CSS para diferentes versiones de navegadores.
1. Principio
Porque diferentes navegadores tienen diferentes soportes y resultados de análisis para CSS, y también debido a la relación de prioridad en CSS. Podemos usar esto para escribir CSS diferente para diferentes navegadores.
Hay aproximadamente tres formas de Hack de CSS: Hack interno de clase CSS, Hack de selector y Hack de referencia de encabezado HTML (si IE). Hack de CSS se dirige principalmente a Hack de clase interna: Para. Por ejemplo, IE6 puede reconocer el guión bajo "_" y el asterisco "*", IE7 puede reconocer el asterisco "*", pero no el guión bajo "_", y Firefox no puede reconocer ambos. Espere
Selector Hack: Por ejemplo, IE6 puede reconocer *html .class{}, IE7 puede reconocer *+html .class{} o *:first-child+html .class{}. Etc.
Referencia de encabezado HTML (si IE) Hack:
Para todos los IE: < ![ endif]-->,
Para IE6 y versiones anteriores:
Este tipo de Hack no solo tendrá efecto en CSS, sino también en todos los códigos escritos en la declaración de juicio.
El orden de escritura generalmente es escribir el CSS de los navegadores con fuertes capacidades de reconocimiento al final. A continuación se explica con más detalle cómo escribir.
2. Métodos de pirateo de CSS de uso común
(1) Método uno de comentario condicional
¡Solo válido en IE
Este texto solo se muestra en el navegador IE
Solo válido en IE6
Solo efectivo en IE6 y superiores
Solo no tiene efecto en IE8
Tiene efecto en navegadores que no son IE
< !- -[if !IE]>
Este texto solo se muestra en navegadores que no son IE
(2 ) método El segundo tipo de método de prefijo de atributo interno
El método de prefijo de atributo consiste en agregar algunos prefijos de pirateo que solo pueden ser reconocidos por navegadores específicos antes de los nombres de atributos de estilo CSS para lograr el efecto de visualización de página esperado.
Tabla comparativa de hacks de CSS en varias versiones del navegador IE
Explicación: en modo estándar
El signo menos "-" es un hack exclusivo de IE6
“\9″ Válido para IE6/IE7/IE8/IE9/IE10
“\0″ Válido para IE8/IE9/IE10, es un hack para IE8/9/10
"\9\0" solo tiene efecto en IE9/IE10 y es un truco de IE9/10
(3) Método tres de pirateo de CSS: método de prefijo selector
Selector El método de prefijo consiste en piratear algunos navegadores que tienen un rendimiento de página inconsistente o requieren un tratamiento especial agregando algunos prefijos delante del selector de CSS que solo ciertos navegadores pueden reconocer.
El más común actualmente es
*html *El prefijo solo es efectivo para IE6*+html *+El prefijo solo es efectivo para IE7
@media screen\9{ ...}Solo válido para IE6/7
@media \0screen {body { background: red }}Solo válido para IE8
@media \0screen\,screen\9 {body { background: blue }} solo es válido para IE6/7/8
@media screen\0 {body { background: green }} es; solo válido para IE8/9/10
@media screen y (min-width:0\0) {body { background: grey }} Solo válido para IE9/10
@media screen y (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange }} solo es válido para IE10, etc.
3 Aplicación práctica
Por ejemplo, para distinguir IE6 tanto para navegadores como para Firefox, puede escribir así: div{
fondo:verde;/*forfirefox*/
.*background:red;/*forIE6*/(bothIE6&&IE7)
}
Lo veo rojo en IE6 y verde en Firefox.
Explicación:
El CSS anterior está en Firefox. No puede reconocer lo que tiene un asterisco al final, por lo que lo filtra y lo ignora. El resultado del análisis es. : div{fondo:verde}, por lo que, por supuesto, el fondo de este div es verde.
En IE6 se pueden reconocer ambos fondos, y el resultado de su análisis es: div{fondo:verde;*fondo:rojo;}, por lo que según el nivel de prioridad, el de atrás es rojo tiene una alta prioridad, por lo que, por supuesto, el color de fondo de este div es rojo.