problemas y soluciones de compatibilidad del navegador web front-end

problemas de compatibilidad comunes:
1, diferentes navegadores etiquetar los márgenes predeterminados (margen) y el relleno (padding) diferentes
soluciones: aumento css en el comodín * {margin: 0; padding: 0;}

2, IE6 de cuestiones bilaterales; conjunto de flotador en IE6, sino también establecer el margen, habrá un margen de problemas
Solución: Conjunto de visualización: inline;

3, cuando la altura de la pestaña Configuración es menos de 10px, en IE6, IE7 superará la altura propio conjunto de
soluciones: más allá de la altura del desbordamiento del conjunto de etiquetas: oculto, o establecer el valor de la línea de altura inferior a la altura de sus ajustes

4, hay fotos por defecto separación
Solución: Utilice un flotador para el diseño img

5, IE9 su navegador no puede utilizar la opacidad
Solución:
opacidad: 0,5; filtro: Alfa (opacidad = 50); filtro: ProgID: DXImageTransform.Microsoft.Alpha (estilo = 0, la opacidad = 50);

6, el margen de superposición; cuando dos elementos adyacentes están provistas de margen margen, el margen tomará el máximo, mínimo desecha;
Solución: Con el fin de evitar que el borde de recubrimiento, un elemento principal puede ser añadido a los sub-elementos, y el elemento de matriz es de desbordamiento dispuesto: hidden;

7, del cursor: mano tipo de visualización mano no es compatible con Safari
soluciones: Cursor del uso unificado: puntero

8, dos elementos a nivel de bloque, el elemento de matriz se proporciona overflow: auto; posición de ajuste elemento hijo: relative; y una mayor altura que el elemento de matriz en IE6, IE7 se oculta y no desbordamiento;
solución: posición de ajuste elemento padre: pariente

Una habilidades: Hack css

Puedo usar un hack del navegador en tres categorías: IE6, IE7 y de viaje; otra (IE8 cromo ff opera safari, etc.)

piratear IE6 la comprensión de un guión bajo _ y el asterisco *
truco asterisco * viajes IE7 se cumplen (incluida la cuestión 6 anterior! importante puede ser considerado un truco es, pero menos práctico.)

　　Por ejemplo, una altura tal conjunto css: 300px; * altura: 200px; _height: 100px;
navegador IE6 para leer altura: 300px tiempo será considerado en alta 300px; leyendo, reconoció * heihgt, por lo que cuando lea IE6 * altura: 200px tiempo borrará la
conflicto antes de un conjunto, que la altura es de 200 px. Siga leyendo, IE6 también reconocieron _height, por lo que se sobreponen a la configuración 200 píxeles de altura, la altura se establece en 100px;
IE7 y el viaje es la misma lectura desde una altura de 300 píxeles establecido. Cuando leen * height200px detendría, porque no saben _height. Serán altamente
resolver a 200 píxeles; el resto del navegador sólo reconoce la primera altura: 300px; altura de modo que se resolverán en 300px.

Debido a que los mismos atributos contradictorios y un establecimiento de prioridades se sobreponen a los anteriores, por lo que el orden de escritura es muy importante.

/ * CSS nivel de atributo * Hack /
Color: Rojo; / * * todos los navegadores pueden identificar /

_Color: rojo; / * IE6 identificado solamente * /

* Color: rojo; / * reconocimiento IE6, IE7 * /

+ Color: rojo; / * reconocimiento IE6, IE7 * /

* + Color: rojo; / * reconocimiento IE6, IE7 * /

[Color: rojo; / * IE6, IE7 reconocimiento * /

color: rojo \ 9; / * IE6, IE7, IE8, IE9 识别 * /

color: rojo \ 0; / * IE8, IE9 reconocimiento * /

color: rojo \ 9 \ 0; / * * Sólo identificación IE9 /

color: rojo \ 0; / * * Sólo identificación IE9 /

Color: rojo importante; / * IE6 no reconoce el peligro de importante * /!

/ * * El CSS selectores etapa Hack /
* {HTML #demo color: red;} / * * Sólo identificación IE6 /

* + HTML #demo {color: red;} / * * Identificación 仅 IE7 /

cuerpo: nth-de-tipo ( 1) #demo {color: red;} / * + IE9, FF3.5 +, Chrome, Safari, Opera puede identificar
* /
cabeza: Primera #demo-body {Niño + Color: Rojo; } / * IE7 +, FF, Chrome, Safari, Opera puede identificar * /

: #Demo raíz {color: rojo \ 9;} / * * Sólo identificación IE9 /
menos flotante, el menos código, será más flexible la página, la página será más escalable.

CSS semántica atributo del prefijo:

• Utilizar Tridentel navegador IE、Maxthon、TTdel núcleo: ;
• Uso Geckodel navegador núcleo: Netcape6y por encima de las versiones FireFox;
• Uso Prestodel navegador núcleo: Opera7y por encima;
• Utilizar Webkitel navegador Safari、Chromedel núcleo: .
• fuentes de referencia de Internet: https://www.cnblogs.com/kzxiaotan/p/11846926.html