1. document.formName.item("itemName") Descripción del problema: en IE, puede usar document.formName.item("itemName") o document.formName.elements ["elementName"]; documento .formName.elements["elementName"].
Solución: utilice document.formName.elements["elementName"] de manera uniforme.
2. Problema del objeto de colección Descripción: En IE, puede usar () o [] para obtener objetos de colección; en Firefox, solo puede usar [] para obtener objetos de colección.
Solución: utilice [] de manera uniforme para obtener objetos de colección.
3. Problema de atributos personalizados Descripción: En IE, puede usar el método de obtención de atributos regulares para obtener atributos personalizados, o puede usar getAttribute() para obtener atributos personalizados en Firefox, solo puede usar getAttribute() para obtener atributos personalizados; .
Solución: obtenga atributos personalizados de manera uniforme a través de getAttribute().
4. eval("idName") Descripción del problema: En IE, puede usar eval("idName") o getElementById("idName") para obtener el objeto HTML con el id idName en Firefox, solo puede usar getElementById(" idName" ) para obtener el objeto HTML con el id idName.
Solución: utilice getElementById("idName") de manera uniforme para obtener el objeto HTML con el ID idName.
5. El problema de que el nombre de la variable es el mismo que el ID de un objeto HTML. Descripción del problema: en IE, el ID del objeto HTML se puede utilizar directamente como el nombre de la variable del objeto subordinado del documento, pero no en el caso de IE. Firefox; en Firefox, se puede utilizar la variable con el mismo ID que el nombre del objeto HTML, pero no en IE.
Solución alternativa: utilice document.getElementById("idName") en lugar de document.idName. Es mejor no utilizar nombres de variables con el mismo ID de objeto HTML para reducir errores al declarar variables; agregue siempre la palabra clave var para evitar ambigüedades.
6. Descripción del problema const: en Firefox, puede usar la palabra clave const o var para definir constantes; en IE, solo puede usar la palabra clave var para definir constantes;
Solución: utilice la palabra clave var de manera uniforme para definir constantes.
7. Problema con el atributo input.type Descripción del problema: El atributo input.type en IE es de sólo lectura, pero el atributo input.type en Firefox es de lectura y escritura.
Solución: no modifique el atributo input.type. Si debe modificarlo, primero puede ocultar la entrada original y luego insertar un nuevo elemento de entrada en la misma posición.
8. Problema de Window.event Descripción del problema: window.event sólo se puede ejecutar en IE, pero no en Firefox. Esto se debe a que el evento de Firefox sólo se puede utilizar en la escena donde ocurre el evento.
Solución: agregue el parámetro de evento a la función donde ocurre el evento y use var myEvent = evt?evt:(window.event?window.event:null) en el cuerpo de la función (suponiendo que el parámetro formal sea evt)
Ejemplo:
código de programa
<tipo de entrada="botón" onclick="hacerAlgo(evento)"/>
<lenguaje de escritura="javascript">
función hacer algo (evt) {
var miEvento = evt?evt:(ventana.evento?ventana.evento:null)
...
}
</script>
9. Event.x y event.y Descripción del problema: En IE, el objeto par tiene atributos x e y, pero no atributos pageX y pageY. En Firefox, el objeto par tiene atributos pageX y pageY, pero no atributos x e y;
Solución: var myX = event.x? event.x: event.pageX; var myY = event.y?
Si considera la pregunta 8, simplemente use myEvent en lugar de event.
10. Problema Event.srcElement Descripción del problema: En IE, el objeto par tiene el atributo srcElement, pero no el atributo de destino; en Firefox, el objeto par tiene el atributo de destino, pero no tiene el atributo srcElement;
Solución: Utilice srcObj = event.srcElement? event.srcElement: event.target;
Si considera la pregunta 8, simplemente use myEvent en lugar de event.
11. Problema con Window.location.href Descripción del problema: En IE o Firefox2.0.x, puede usar window.location o window.location.href en Firefox1.5.x, solo puede usar window.location.
Solución alternativa: utilice window.location en lugar de window.location.href. Por supuesto, también puedes considerar usar el método location.replace().
12. Problemas con las ventanas modales y no modales Descripción del problema: En IE, las ventanas modales y no modales se pueden abrir a través de showModalDialog y showModelessDialog en Firefox; esto no es posible.
Solución: utilice directamente el método window.open(pageURL,name,parameters) para abrir una nueva ventana.
Si necesita pasar parámetros de la ventana secundaria a la ventana principal, puede usar window.opener en la ventana secundaria para acceder a la ventana principal. Si necesita que la ventana principal controle la ventana secundaria, use var subWindow = window.open(pageURL,name,parameters) para obtener el objeto de ventana recién abierto.
13. La cuestión del marco y el marco i toman el siguiente marco como ejemplo:
<frame src=" http://www.abc.com/123.html " id="frameId" nombre="frameName" />
(1) Acceda al objeto de marco, IE: use window.frameId o window.frameName para acceder al objeto de marco;
Firefox: use window.frameName para acceder a este objeto de marco;
Solución: utilice window.document.getElementById("frameId") de manera uniforme para acceder a este objeto de marco;
(2) Para cambiar el contenido del marco, puede usar window.document.getElementById("frameId").src = "index.html" o window.frameName.location = "index.html" para cambiar el contenido del marco en ambos IE y Firefox;
Si necesita pasar parámetros en el marco a la ventana principal, puede usar la palabra clave principal en el marco para acceder a la ventana principal.
14. Problema de carga del cuerpo Descripción del problema: el objeto del cuerpo de Firefox existe antes de que el navegador lea completamente la etiqueta del cuerpo, mientras que el objeto del cuerpo de IE debe existir después de que el navegador lea completamente la etiqueta del cuerpo;
[Nota] Este problema no se ha verificado realmente y se modificará después de la verificación.
[Nota] Se ha verificado que el problema anterior no existe en IE6, Opera9 y FireFox2. Un script JS simple puede acceder a todos los objetos y elementos que se han cargado antes del script, incluso si el elemento aún no se ha cargado.
15. Explicación del problema del método de delegación de eventos: en IE, use document.body.onload = inject, donde la función inject() se implementó anteriormente en Firefox, use document.body.onload = inject();
Solución: use document.body.onload=new Function('inject()'); o document.body.onload = function(){/* Aquí está el código */}
[Nota] La diferencia entre función y función
16. La diferencia entre los elementos principales accedidos Descripción de la pregunta: En IE, use obj.parentElement u obj.parentNode para acceder al nodo principal de obj, en Firefox, use obj.parentNode para acceder al nodo principal de obj; nodo.
Solución: debido a que tanto Firefox como IE admiten DOM, obj.parentNode se usa para acceder al nodo principal de obj.
17. cursor:mano VS cursor:puntero
Descripción del problema: Firefox no admite instrucciones manuales, pero IE admite punteros. Ambas son instrucciones manuales.
Solución: utilice el puntero de manera uniforme.
18. Problemas con el texto interno.
Descripción del problema: InnerText funciona normalmente en IE, pero InnerText no funciona en FireFox.
Solución: utilice textContent en lugar de internalText en navegadores que no sean IE.
Ejemplo:
código de programa
if(navigator.appName.indexOf("Explorador") >-1){
document.getElementById('elemento').innerText = "mi texto";
} demás{
document.getElementById('element').textContent = "mi texto";
}
[Nota] InnerHTML es compatible con navegadores como IE y Firefox al mismo tiempo. Otros, como externalHTML, solo son compatibles con IE y es mejor no utilizarlos.
19. Problema de asignación de ancho y alto de objeto Descripción del problema: Declaraciones similares a obj.style.height = imgObj.height en FireFox no son válidas.
Solución: use uniformemente obj.style.height = imgObj.height + 'px';
20. Problema de operación de tabla Descripción del problema: IE, Firefox y otros navegadores tienen diferentes operaciones en la etiqueta de la tabla, lo cual no está permitido en IE Para la asignación de HTML interno de table y tr, cuando se usa js para agregar un tr, usar el método appendChild no funciona.
Solución:
código de programa
//Agrega una fila vacía a la tabla:
var fila = otable.insertRow(-1);
var celda = document.createElement("td");
celda.innerHTML = "";
celda.className = "XXXX";
fila.appendChild(celda);
[Nota] Como rara vez uso JS para operar tablas directamente, nunca me he encontrado con este problema. Se recomienda utilizar el marco JS para operar tablas, como JQuery.
21. Problema de sangría de listas ul y ol Al eliminar la sangría de ul, ol y otras listas, el estilo debe escribirse como: list-style:none;margin:0px;padding:0px;
El atributo de margen es válido para IE y el atributo de relleno es válido para Firefox. ← Esta oración está expresada incorrectamente, consulte ↓ para obtener más detalles
[Nota] Este problema no se ha verificado realmente y se modificará después de la verificación.
[Nota] Se ha verificado que en IE, configurar el margen: 0px puede eliminar las sangrías superiores, inferiores, izquierdas y derechas, los espacios en blanco y los números o puntos de la lista. La configuración del relleno no tiene ningún efecto en el estilo en Firefox. configurar el margen: 0px solo puede eliminar las sangrías superior e inferior. Después de configurar el relleno: 0px, solo puede eliminar las sangrías izquierda y derecha. También debe configurar el estilo de lista: ninguno para eliminar los números o puntos de la lista. En otras palabras, en IE, solo se puede configurar el margen: 0px para lograr el efecto final, mientras que en Firefox, el margen: 0px, el relleno: 0px y el estilo de lista: ninguno se deben configurar al mismo tiempo para lograr el efecto final.
22. Problema de transparencia de CSS, es decir: filtro:progid:DXImageTransform.Microsoft.Alpha(estilo=0,opacidad=60).
FF: opacidad: 0,6.
[Nota] Lo mejor es escribir ambos y poner el atributo de opacidad debajo.
23. Problema de esquinas redondeadas de CSS IE: las versiones inferiores a ie7 no admiten esquinas redondeadas.
FF: -moz-border-radius:4px, o -moz-border-radius-topleft:4px;-moz-border-radio-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radio inferior derecha: 4px;.
[Nota] El problema de las esquinas redondeadas es un problema clásico en CSS. Se recomienda utilizar el conjunto de marcos JQuery para establecer esquinas redondeadas y dejar estos problemas complejos a otros.
Hay demasiados problemas en CSS, e incluso la misma definición de CSS tiene diferentes efectos de visualización en diferentes estándares de página. Una sugerencia que está en línea con el desarrollo es que la página debería escribirse utilizando los estándares DHTML estándar, con menos uso de tablas. Las definiciones CSS deberían basarse en el DOM estándar tanto como sea posible, teniendo en cuenta los navegadores convencionales como IE, Firefox. y Ópera. Por cierto, en muchos casos, los estándares de interpretación de CSS de FF y Opera están más cerca de los estándares de CSS y son más normativos.