problemas de compatibilidad del navegador común de front-end?

Navegador en el mercado, muchos tipos diferentes, diferentes del núcleo del navegador no son los mismos, por lo que cada navegador analiza la página web hay algunas diferencias.
kernel navegador se divide en dos, uno motor de renderizado, y el otro es js motor, más inclinado a decir que el núcleo motor de renderizado.
Común del núcleo del navegador:
kernel navegador común se puede dividir en cuatro tipos: Trident, Gecko, parpadeo, Webkit
Aquí Insertar imagen Descripción
problemas de compatibilidad comunes:
1, diferentes navegadores por defecto parche etiqueta exterior (margen) y dentro del parche diferente (relleno)
solución: aumento en css 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

Publicado 24 artículos originales · ganado elogios 0 · Vistas 191

Supongo que te gusta

Origin blog.csdn.net/CKT0816/article/details/104779813
Recomendado
Clasificación