El tema que estamos discutiendo es el diseño de páginas web CSS. El problema más problemático para todos es la compatibilidad del navegador. Aunque 52CSS.com ha introducido muchos conocimientos en esta dirección, todavía confunde a muchos desarrolladores. El artículo de hoy enumerará veinte. -Tres diferencias entre JavaScript y JavaScript en IE y Firefox. Espero que sea útil para el aprendizaje de todos.
1. problema document.formName.item("itemName") Descripción del problema: En IE, puede usar document.formName.item("itemName") o document.formName.elements ["elementName"]; en Firefox, solo puede usar document.formName.elements["elementName"]; .
Solución: utilice document.formName.elements["elementName"] de manera uniforme.
2. Problemas con los objetos de la colección <br /> Descripción del problema: en IE, puede usar () o [] para obtener objetos de la colección, en Firefox solo puede usar [] para obtener objetos de la colección.
Solución: utilice [] de manera uniforme para obtener objetos de clase de colección.
3. Problema de atributos personalizados <br /> Descripción del problema: 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 obtenerlas propiedades personalizadas.
Solución: obtenga atributos personalizados de manera uniforme a través de getAttribute().
4. Problema de eval("idName") <br /> Descripción del problema: En IE, puede usar eval("idName") o getElementById("idName") para obtener el objeto HTML con el id idName; en Firefox, puede; Utilice únicamente getElementById ("idName") para obtener el objeto HTML con el id idName.
Solución: utilice getElementById("idName") de manera uniforme para obtener el objeto HTML cuya identificación es idName.
5. El problema de que el nombre de la variable es el mismo que el ID de un objeto HTML <br /> 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 Firefox; en Firefox, se puede usar con el objeto HTML. Los nombres de variables con el mismo ID no se pueden usar 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. Problema const <br /> Descripción del problema: 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 <br /> 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 <br /> Descripción del problema: window.event solo se puede ejecutar en IE, pero no en Firefox. Esto se debe a que el evento de Firefox solo se puede usar 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 fuente de ejemplo [www.downcodes.com] <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)
...
}
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 <br /> Descripción del problema: En IE, el objeto par tiene el atributo srcElement, pero no tiene 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 <br /> 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. ubicación .
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 <br /> Descripción del problema: En IE, las ventanas modales y no modales se pueden abrir a través de showModalDialog y showModelessDialog en Firefox, pero esto no se puede hacer.
Solución: utilice directamente 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. Problemas con marcos e iframes <br /> Tome el siguiente marco como ejemplo:
<frame src="http://www.downcodes.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 = "52css.com.html" o window.frameName.location = "52css.com.html" tanto en IE como en Firefox El contenido del marco;
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 <br /> 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 cargarse 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. Método de delegación de eventos <br /> Descripción del problema: 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. Diferencias en los elementos principales accedidos <br /> Descripción del problema: 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;
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 fuente de ejemplo [www.downcodes.com] if(navigator.appName.indexOf("Explorador") >-1){
document.getElementById('elemento').innerText = "mi texto";
} demás{
document.getElementById('element').textContent = "mi texto";
}
19. Problema de asignación de ancho y alto de objeto <br /> Descripción del problema: declaraciones similares a obj.style.height = imgObj.height en FireFox no son válidas.
Solución: utilice obj.style.height = imgObj.height + 'px' de manera uniforme.
20. Problemas de operación de tablas <br /> Descripción del problema: IE, Firefox y otros navegadores tienen operaciones diferentes en la etiqueta de la tabla. En IE, la asignación de tabla y tr en HTML interno no está permitida cuando se usa js para agregar un tr. el método appendChild tampoco funciona.
Solución:
Código fuente de ejemplo [www.downcodes.com] //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);
21. Problema de sangría de listas ul y ol <br /> 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. Para obtener más conocimientos, consulte el artículo en 52CSS.com. Una sugerencia que está en línea con el desarrollo es que la página debería escribirse utilizando el estándar DHTML, con menos uso de tablas. La definición de CSS debería 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. 