Resumen de las preguntas de la entrevista sobre compatibilidad de front-end web
Uno, parte html
1. Los navegadores inferiores a IE9 reconocen la nueva etiqueta H5.
html5shiv.js dirección de descarga
2. El problema de los márgenes internos y externos de la etiqueta ul La etiqueta ul tiene un margen externo predeterminado en IE6 \ IE7, pero hay un margen interno predeterminado en IE8 y superior y en otros navegadores.
Solución: establezca uniformemente los márgenes interior y exterior de ul en 0
En segundo lugar, la compatibilidad de los estilos CSS
1. El problema del hack de CSS: principalmente para diferentes versiones de IE, y diferentes navegadores tienen diferentes métodos de escritura.
Hack de comentarios condicional de IE:
El contenido aquí solo es visible en IE7.0
2. Problema de distancia de doble lado de IE6: IE6 tiene un margen horizontal después de flotar. En este momento, el margen exterior del elemento es el doble de su valor
Solución: display: block;
3. Hay un espacio debajo de la imagen debajo de IE6
Solución: configurar display: block; para img
4. Habrá un error de 3px entre los dos flotantes en IE6
Solución: también configure float: left; para el elemento de la derecha;
5. No existe el concepto de ancho mínimo en IE6, su ancho predeterminado es ancho mínimo.
6. En IE6, se utiliza margin: 0 auto; no se puede centrar
Solución: establezca text-align: center; para su contenedor principal
7. El hipervínculo después de hacer clic en él ya no tiene atributos activos ni activos.
Solución: escriba el estilo CSS en el orden de lvha,
": enlace": un estado en el que no se ha accedido a la etiqueta;
": visitado": el estado en el que se ha visitado una etiqueta;
": hover": el estado del mouse sobre la etiqueta a;
": activo": el estado de una etiqueta cuando se presiona con el mouse;
8. Después de usar el posicionamiento absoluto o el posicionamiento relativo, la configuración del índice z en IE falla porque sus elementos dependen del índice z del elemento principal, pero el elemento principal es 0 por defecto, y el secundario es alto y el principal es bajo, por lo que la pantalla no cambiará Orden.
9. La altura de la línea de 1px no se puede establecer en IE6, el motivo se debe a su altura de línea predeterminada
Solución: configure overflow: hidden; o line-height: 1px;
Tres, compatibilidad con JavaScript
1. La función del método de enlace de eventos estándar es addEventListener, pero es attachEvent en IE;
2. El método de captura de eventos es inconsistente. El navegador estándar es de afuera hacia adentro, mientras que IE es de adentro hacia afuera, pero el resultado final es establecer el estándar de IE como estándar.
3. Obtenido por window.event. Y el método para obtener el elemento de destino también es diferente, el navegador estándar es event.target y el IE es event.srcElement
4. El valor de la función de procesamiento de fecha obtenido en la versión inferior de IE no es la diferencia de 1900, pero en la versión superior de IE, es consistente con el navegador estándar, y el valor obtenido también es la diferencia de 1900.
Por ejemplo: var year = new Date (). GetYear ();
5. Ajax se implementa de diferentes maneras. Lo que entiendo es la diferencia en la obtención de XMLHttpRequest, que es activeXObject en IE
6. El innerHtml de tr no se puede operar en IE 7. La forma de obtener el nodo padre y el nodo hijo del nodo DOM es diferente
Otros navegadores: parentNode parentNode.childNodes
IE: parentElement parentElement.childre
Si desea conocer las preguntas de la entrevista de compatibilidad de front-end web y problemas técnicos relacionados con el front-end web, puede seguir a Xiaoqian y compartir más conocimientos técnicos e información de la industria más adelante. Esperando por ti ~~~~