problemas y soluciones comunes de compatibilidad del navegador
Los llamados problemas de compatibilidad del navegador, ya que se refieren a diferentes navegadores tienen diferentes resoluciones sobre la misma pieza de código, lo que resulta en el caso de visualización de la página, el resultado no es uniforme. En la mayoría de los casos, nuestras necesidades, no importa lo que el navegador del usuario para ver nuestro sitio web o visite nuestro sistema debe ser unificada pantalla. Así navegador problemas de compatibilidad son los desarrolladores de aplicaciones para usuario a menudo se encuentran con un problema que debe abordarse.
Antes de conocer la compatibilidad del navegador, quiero desarrolladores front-end se dividen en dos categorías:
La primera es, precisamente, de acuerdo con los desarrolladores de aplicaciones para usuario para diseñar el desarrollo se puede decir que sea una precisión de 1 píxel, que puede encontrar fácilmente un diseño inadecuado, y en casos raros se encontrará con problemas de compatibilidad con los navegadores, estos problemas son a menudo problemas con el navegador muertos, y post-producción de sus páginas fácil de mantener, menos problemas reutilización de código, se puede decir es más firmemente asegurada código.
La segunda categoría es que los desarrolladores de aplicaciones para usuario básicos para desarrollar de acuerdo con el diseño, una gran diferencia entre una gran cantidad de pequeños detalles, como el espaciamiento, altura de línea, ubicación y así sucesivamente imagen menudo pobres unos pocos píxeles. Para lograr un efecto de la repetición de la prueba también está disponible, específicamente por qué este efecto es aún vaga, el diseño general es muy frágil. Un pequeño cambio en un lío. ¿Por qué escribe el código todavía no sé qué. Tales promotores a menudo problemas de compatibilidad a menudo atrapados. Pues bien, este navegador y caótica otro navegador modificado. Cambio a cambio de tener ninguna pista. De hecho, la mayor parte de los problemas de compatibilidad que se enfrentan no deben atribuirse al navegador, pero su tecnología en sí misma hacia arriba.
El artículo principal de la primera categoría, el tipo riguroso de desarrollador, así que aquí la principal diferencia desde la perspectiva del navegador para analizar los problemas de compatibilidad de resolver.
-------------------------------------------------- -------------------------------------------------- -------------------------------------------------- ----
problema de compatibilidad del navegador: diferentes pestañas del navegador por defecto de parche externo e interno diferentes parches
Síntomas del problema: acaba de escribir unas cuantas etiquetas, sin que el caso del patrón de controlar su margen y el relleno bastante diferente.
Frecuencia reunió: 100%
Solución: Utilice Reinicio de estilos CSS
Nota: Este es el más común y más fácilmente resuelto por una serie de cuestiones de compatibilidad del navegador, la casi totalidad de los archivos CSS que comienzan con el carácter comodín * se creará dentro y fuera del parche de cada ficha es 0.
problema de compatibilidad del navegador: la cualidad del bloque etiquetas flotador, hay circunstancias en las márgenes rampantes, configuraciones de pantalla en el margen IE6 que las grandes
Los síntomas de problemas: Los síntomas más comunes se encuentran detrás de IE6 es en una tapa a la línea siguiente
frecuencia de encuentro: 90% (página un poco más complejo viene a ser, diseño del flotador de la mayoría de los problemas de compatibilidad del navegador común)
Solución: Añadir el patrón de control de visualización de la etiqueta de flotador: inline; convertido al atributo inline
Notas: Nuestra más comúnmente utilizado es el diseño div + CSS, mientras que el div es una etiqueta típica atributo de bloque, la disposición horizontal cuando utilizamos generalmente div flotante para lograr, la separación lateral se establece si el margen se dio cuenta, se trata de una inevitable problemas de compatibilidad encuentro.
Compatibilidad del navegador Pregunta tres: fijar una etiqueta de menor altura (generalmente menos de 10px), en IE6, IE7, viajar más allá de su altura establecida altura
Síntomas del problema: un alto grado de control IE6,7 y viajar en esta etiqueta, establecer su propio más allá de la altura
frecuencia Encounter: 60%
Solución: ficha Configuración debe sobrepasar la altura de overflow: hidden; establece el alto de fila o línea de altura menor que la altura que ha establecido.
NOTA: Esto ocurre en el fondo hemos creado una pequeña etiqueta filete. Este problema se produce debido a que el anterior navegador IE8 será por defecto para etiquetar una altura mínima altura de la fila. Incluso si la etiqueta está vacía, la altura de la etiqueta todavía llegar a la altura de la fila por defecto.
Compatibilidad del navegador Pregunta 4: ficha Propiedades de línea, ajuste la pantalla: la situación después de diseño de bloque mediante flotación, hay margen rampante, de paso bug de IE6
terreno de juego en el IE6 relación de paso sobrepasa el conjunto: Síntomas del problema
Probabilidad de acierto: 20%
Solución: display: block; volver añadió display: inline; display: table;
NOTA: Las etiquetas de atributos en línea, con el fin de ajustar la anchura y la altura, necesitamos pantalla conjunto: block; (además de etiqueta especial de entrada). Después de que el flotador con el diseño y el margen lateral, en IE6, él margen lateral que tiene el error después de que los atributos de bloque de flotación. Pero debido a que es en sí mismo dentro de la etiqueta límite de la propiedad, así que agregamos display: inline, entonces no puede ser localizado en el aspecto. Esta vez también necesitamos pantalla: pantalla añadiendo detrás en línea: talbe.
Compatibilidad del navegador Pregunta 5: La imagen tiene espaciado predeterminado
Síntomas del problema: etiqueta img juntos un par de veces, algunos navegadores por defecto espaciamiento, además de unos problemas mencionados comodín no funciona.
Probabilidad de acierto: 20%
Solución: Utilice el flotador distribución de la propiedad img
Nota: debido a la etiqueta img dentro de una línea de la etiqueta de atributo, siempre que la anchura del contenedor no supere, etiqueta IMG será clasificado en una sola línea, pero entre etiqueta IMG será parte de los emplazamientos de navegador. Esta separación se utiliza para eliminar la forma de flotador derecha
Compatibilidad del navegador emite Seis: Etiqueta posición más baja altura no es compatible min-height
Síntomas del problema: debido a que la misma min-altura no es compatible con una propiedad CSS, no es bueno para ser compatible con varios navegadores al establecer min-height
probabilidad de acierto: 5%
Solución: Si queremos establecer una altura mínima de 200 píxeles de la etiqueta, es necesario proporcionar para: {min-height: 200px; height: auto importante, la altura :! 200px; overflow: visible;}
Nota: Cuando B / S sistemas abiertos front-end, tenemos esta demanda en muchos casos. Cuando el contenido es inferior a un valor (por ejemplo, 300 píxeles). Altura del recipiente es 300px; altura cuando el contenido es mayor que este valor, la altura del soporte de contenedor es alta, en lugar de la barra de desplazamiento. Esta vez tendremos que hacer frente a este problema de compatibilidad.
Compatibilidad del navegador emite siete: la transparencia compatible con CSS
Hacer compatible esta página es: cada escritura una pieza de código (o un diseño en una fila) todos somos compatibles en diferentes navegadores visto, por supuesto, a un cierto grado de habilidad, tales problemas no. Recomendado para principiantes a menudo se encuentran con problemas de compatibilidad. Muchos problemas de compatibilidad son diferentes porque la etiqueta de atributo por defecto del navegador analizar consecuencia, siempre que podemos configurar fácilmente un poco para resolver estos problemas de compatibilidad. Si estamos familiarizados con la propiedad predeterminada de la etiqueta, entonces usted también puede entender por qué no habrá problemas de compatibilidad y de cómo resolver estos problemas de compatibilidad.
-
/* CSS hack*/
Rara vez usar pirata informático puede ser hábitos personales, no me gusta para escribir código que no es compatible con IE, a continuación, utilizar el truco para resolver. Sin embargo hacker es todavía muy útil. Puedo usar el navegador de hackers en tres categorías: IE6, IE7 y de viaje; otra (IE8 Chrome Safari ff ópera, etc.)
◆ IE6 conocimientos hacker es un guión bajo _ y el asterisco *
◆ IE7 hacker de viajes sabe que asterisco *
Por ejemplo, este tipo de configuración de un CSS:
height:300px;*height:200px;_height:100px;
IE6 navegador para leer altura: 300px tiempo será considerado en alta 300px; sigue leyendo, reconoció heihgt, por lo que cuando leyó IE6 altura: 200px tiempo anulará la configuración antes de un conflicto, que la altura es de 200 píxeles . Leyendo, IE6 _height también reconocido, por lo que se sobreponen a la configuración de 200px de altura, la altura se establece en 100px;
Internet Explorer 7 es la misma lectura y los viajes hacia abajo desde una altura de 300px configuración. Cuando leen * height200px detendría, porque no saben _height. Así que van a ser resueltos a la altura de 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 la misma prioridad y quiere la propiedad de un conflicto se sobreponen a la anterior, por lo que el orden de escritura es muy importante.
Cuando diseño de sitios web, hay que señalar estilos CSS compatibles con los diferentes problemas navegadores, especialmente para el diseño de redes de uso completo DIV CSS, debemos prestar más atención a la compatibilidad IE6 IE7 FF con estilos CSS, o su caos red puede salir no quieren aparecer el efecto!
Todo el navegador
altura: 100px;
IE6 dedicada
_height: 100px;
IE6 especial
altura *: 100px;
IE7 dedicado
* + altura: 100px;
IE7, FF común
altura: 100px importante ;!
Javascript parte
1. problema document.form.item
problema:
document.formName.item ( "itemName") la presencia de dicha declaración en el código no se puede ejecutar en el FF
solución:
改用 document.formName.elements [ “elementName”]
2. Objeto de colecciones
problema:
Cuando se utiliza un número de código de acceso objeto clase de colección (), IE puede aceptar, no FF
solución:
Utilice [] como una operación de subíndice, por ejemplo:
document.getElementsByName("inputName")(1) 改为 document.getElementsByName("inputName")[1]
3. window.event
problema:
Uso no window.event trabajo en FF
solución:
El evento de FF sólo se puede utilizar en el sector eventos, este problema no se puede resolver de forma temporal. El evento puede propagarse función en el trabajo en torno a:
onMouseMove = "functionName(event)"
function functionName (e) {
e = e || window.event;
......
}
Identificación del objeto 4. HTML como el nombre del objeto en cuestión
problema:
En IE, ID del objeto HTML como un nombre de variable objeto subordinado se puede utilizar directamente el documento, no en el FF
solución:
Todo ello con el uso de una variable de objeto estándar getElementById ( "idName")
El problema objetivo adquirida por la cadena idName
problema:
En IE, utilizando eval ( "idName") se puede obtener como la ID de objeto idName HTML, no en el FF
solución:
( "IdName") se reemplazó con getElementById eval ( "idName")
6. El mismo nombre de variable con un objeto problema Identificación del HTML
problema:
En el FF, ya que el identificador de objeto no es un nombre de objeto HTML, HTML se puede utilizar con el mismo nombre de variable de ID de objeto, IE no puede
solución:
Cuando la declaración de variables, además de todas var, para evitar ambigüedades, de manera que la operación normal puede en IE
mejor no tomar el mismo nombre de variable de objeto HTML de identificación, para reducir falsas
7. event.x problema con event.y
problema:
En IE, objeto de evento tiene propiedades x, FF No hay
solución:
En el FF, y es equivalente event.x event.pageX, event.pageX IE pero no
lo que el uso event.clientX event.x reemplazado, en esta variable también ha IE
tienen event.clientX diferencias sutiles con event.pageX es la barra de desplazamiento
a ser exactamente el mismo, puede ser:
mX = event.x event.x :? event.pageX;
a continuación, en lugar de mX event.x
8. De cerca
problema:
El marco se puede obtener con window.testFrame en IE, FF no son
solución:
window.top.document.getElementById("testFrame").src = 'xx.htm'
window.top.frameName.location = 'xx.htm'
9. obtener propiedades de los elementos
En FF, la propiedad debe ser su propia definición de getAttribute () hecho
En el FF 10. Sin parentElement, parement.children pero con parentNode, parentNode.childNodes
problema:
ChildNodes subíndice significa en diferente IE y FF, FF inserta en el nodo childNodes de texto en blanco
solución:
Puede evitar este problema mediante node.getElementsByTagName ()
problema:
Cuando un nodo es que falta html, IE y FF parentNode interpretación diferente, por ejemplo:
<form>
<table>
<input/>
</table>
</form>
valor Input.parentNode FF en la forma, y es nulo en el IE input.parentNode nodo
problema:
FF nodos que no lo hizo método removeNode
solución:
Debe utilizar un node.parentNode.removeChild método (nodo)
11. problema const
problema:
Const palabra clave no puede ser utilizado en el IE
solución:
En lugar de var
Objeto 12. cuerpo
problema:
El cuerpo de FF existía antes de que el cuerpo de la etiqueta no se ha leído completamente en el navegador, debe existir decir, después de que el cuerpo fue leído por completo
este tendrá en IE, el documento no termina de cargar, appendChild aparecerá en el cuerpo página en blanco pregunta
solución:
Todos los nodos insertados en el cuerpo de la operación, después de todo de la onload
13. url codificación
problema:
Por lo general, el FF no reconocido y js
solución:
Si se escribe la dirección URL en js escritura directa y escritura y Do
14. cuestiones nodeName y tagName
problema:
En FF, todos los nodos son valor nodeName, pero no el valor textNode tagName en IE, un problema con el uso de nodeName
solución:
Utilice tagName, pero debe detectar si está vacía
15. Propiedades del elemento
Bajo es de sólo lectura IE input.type, pero puede ser modificado en el FF
16. document.getElementsByName () y document.all [Nombre] Problemas
Pregunta:
En IE, getElementsByName (), document.all [nombre ] no se puede utilizar para obtener el elemento div
si hay otros elementos que no se pueden tomar no saben (este tema es controvertido, sin dejar de estudiar)
17. llama el problema sub-bastidor o otros elementos de bastidor
En IE, el método siguiente se puede usar para obtener valores de sub-elementos:
document.getElementById ( “frameName”). (documento). elementName
window.frames [ “frameName”]. elementName
En FF en la forma que necesita para el cambio se lleva a cabo, compatible con IE:
window.frames [ “frameName”]. contentWindow.document.elementName
window.frames [ “frameName”]. document.elementName
18. El ancho y la altura del problema de asignación de objetos
problema:
FireFox obj.style.height similares imgObj.height = instrucción no es válida
solución:
Unificado uso obj.style.height = imgObj.height + "px";
problema 19. innerText
problema:
innerText en IE puede funcionar, pero no funciona en Firefox innerText
solución:
En lugar de utilizar el navegador textContent innerText no IE
20. event.srcElement cuestiones y event.toElement
problema:
Bajo IE, incluso objeto srcElemento tiene atributos, pero no hay ningún atributo de destino; en Firefox, incluso los objetos tienen la propiedad de destino, pero ningún atributo srcElemento
solución:
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;
21. Seleccione el contenido de la web está prohibido
problema:
FF necesidad CSS prohibido, prohibido IE JS
solución:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
22. Captura de eventos
problema:
FF no setCapture (), releaseCapture (método)
solución:
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
