1.Firefox no puede soportar inntext.
Firefox admite InnerHTML pero no es compatible con InnteText. Admite TextContent para implementar InnteText, pero los espacios innecesarios también se conservan de forma predeterminada. Si no usa TextContent, si la cadena no contiene código HTML, también puede usar InnerHTML.
2. Está prohibido seleccionar contenido de la página web:
En IE, JS se usa generalmente: obj.onselectstart = function () {return false;}
Firefox usa CSS: -Moz-User-Select: Ninguno
3. Soporte de filtro (ejemplo: filtro transparente):
Es decir: filtro: alfa (opacidad = 10);
Firefox: -Moz-Opacidad: .10;
4. Captura de eventos:
Es decir: obj.setCapture (), obj.ReleaseCapture ()
Firefox: document.addeventListener ("MouseMove", MouseMoveFunction, verdadero);
document.removeEventListener ("MouseMove", MouseMoveFunction, verdadero);
5. Obtenga la posición del mouse:
Es decir: event.clientx, event.clienty
Firefox: la función del evento debe pasar el objeto de eventos
obj.onmouseMove = function (ev) {
X = ev.pagex; y = ev.pagey;
}
6. Cuestiones límite de elementos como Div:
Por ejemplo: establezca un CSS :: {ancho: 100px; altura: 100px; borde:#000000 1px sólido;}
En IE: el ancho del Div (incluido el ancho del borde): 100px, la altura del Div (incluido el ancho del borde): 100px;
Y Firefox: el ancho del Div (incluido el ancho del borde): 102px, la altura del Div (incluido el ancho del borde): 102px;
Entonces, al hacer esta ventana de arrastre que sea compatible con IE y Firefox, debe usar su cerebro para escribir JS y CSS y darle dos consejos
1. Determine el tipo de navegador:
var isie = document.all? verdadero: falso;
Escribí una variable, si el documento. Toda la sintaxis se admite, entonces isie = true, de lo contrario isie = falso
2. Procesamiento de CSS en diferentes navegadores:
En general, ¡puede usarlo! Es importante para priorizar las declaraciones de CSS (solo compatible con Firefox)
Por ejemplo: {Border-width: 0px! IMPORTANTE; Border-width: 1px;}
Bajo Firefox, este elemento no tiene borde, y debajo de IE, el ancho de la frontera es 1px
1.Document.FormName.Item ("itemName") Problema
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: use document.formname.elements ["ElementName"] de manera unificada.
2. Problema de objetos de recopilación
Descripción del problema: en IE, puede usar () o [] para obtener el objeto de clase de colección; En Firefox, solo puede usar [] para obtener el objeto de clase de recolección.
Solución: Use [] para obtener objetos de clase de recolección de manera unificada.
3. Problemas de atributos personalizados
Descripción del problema: en IE, puede usar el método para obtener 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 alternativa: obtenga uniformemente atributos personalizados a través de getAttribute ().
4.Eval ("idname") problema
Descripción del problema: en IE, puede usar eval ("idname") o getElementById ("idname") para obtener el objeto HTML con IdName; En Firefox, solo puede usar GetElementById ("IdName") para obtener el objeto HTML con IdName.
Solución: use GetElementById ("IdName") para obtener el objeto HTML con ID como idname.
5. Problema con el mismo nombre de variable que la ID de objeto HTML
Descripción del problema: En IE, la ID del objeto HTML se puede usar directamente como el nombre variable del objeto subordinado del documento, pero no en Firefox; Bajo Firefox, se puede usar el nombre variable que es el mismo que el ID del objeto HTML, pero no en IE.
Solución alternativa: use document.getElementById ("idname") en lugar de document.idname. Es mejor no tomar nombres de variables con la misma ID de objeto HTML para reducir los errores; Al declarar variables, agregue la palabra clave VAR para evitar la ambigüedad.
6. Problema
Descripción del problema: en Firefox, puede usar la palabra clave const o la palabra clave var para definir constantes; En IE, solo puedes usar la palabra clave VAR para definir constantes.
Solución: use la palabra clave VAR para definir constantes de manera uniforme.
7. Problema de atributos de type.
Descripción del problema: la propiedad de type de entrada en IE es de solo lectura; pero la propiedad de type de entrada bajo Firefox es lectura.
Solución: No modifique la propiedad de entrada. Type. Si tiene que modificarlo, primero puede ocultar la entrada original y luego insertar un nuevo elemento de entrada en la misma posición.
8.Window.Event Problema
Descripción del problema: Window.Event solo puede ejecutarse en IE, no en Firefox, porque el evento Firefox solo se puede usar en la escena en la que ocurre el evento.
Solución: Agregue los parámetros del evento a la función donde ocurre el evento y use var myEvent = evt? Evt: (Window.event? Window.event: NULL)
Ejemplo:
La copia del código es la siguiente:
<input type = "button" onClick = "dosomething (evento)"/>
<script language = "javaScript">
function Dosomething (EVT) {
var myevent = evt? Evt: (Window.event? Window.event: NULL)
...
}
9. Event.x y Event.y Problemas
Descripción del problema: En IE, el objeto uniforme tiene atributos X e Y, pero no hay atributos Pagex y Pagey; Bajo Firefox, el objeto uniforme tiene atributos Pagex y Pagey, pero no hay atributos X e Y.
Solución: var myx = event.x? event.x: event.pagex; var myy = event.y? Event.y: Event.Pagey;
Si considera el octavo problema, simplemente use Myevent en lugar de evento.
10.EVENT. Problema de cicatrización
Descripción del problema: Bajo IE, el objeto uniforme tiene una propiedad SRCelement, pero no tiene propiedad de destino; Bajo Firefox, el objeto uniforme tiene una propiedad objetivo, pero no hay propiedad de Cicelement.
SOLUCIÓN: Use srcobj = event.srcelement? event.srcelement: event.target;
Si considera el octavo problema, simplemente use Myevent en lugar de evento.
11.Window.location.href Problema
Descripción del problema: en IE o Firefox2.0.x, puede usar Window.location o Window.location.ref; En Firefox1.5.x, solo puede usar Window.location.
Solución alternativa: use Window.location en lugar de Window.location.href. Por supuesto, también puede considerar usar el método ubicación.replace ().
12. Problemas de ventanas modales y no modales
Descripción del problema: en IE, se pueden abrir ventanas modales y no modales a través de ShowModaldialog y ShowModelessDialog; Bajo Firefox, no puede.
Solución: use Window.open (PageUrl, nombre, parámetros) para abrir una nueva ventana.
Si necesita pasar parámetros en la ventana infantil de regreso a la ventana principal, puede usar la ventana. Si la ventana principal necesita controlar la ventana infantil, use VAR Subwindow = Window.open (PageUrl, Nombre, Parámetros); Para obtener el objeto de ventana recién abierto.
13. Problemas de marco e iframe
El siguiente cuadro es un ejemplo:
<Frame src = "xxx.html" id = "frameID" name = "franameame" />
(1) Objeto de marco de acceso
Es decir: use window.frameid o window.framename para acceder a este objeto de cuadro;
Firefox: use Window.framename para acceder a este objeto de cuadro;
Solución: use Window.document.getElementById ("FrameId") para acceder a este objeto de cuadro;
(2) Contenido de marco de interruptor
Tanto en IE como en Firefox, puede usar Windows.document.getElementById ("FrameId"). Src = "xxx.html" o Window.framename.location = "xxx.html" para cambiar el contenido del marco;
Si necesita pasar los parámetros en el marco de regreso a la ventana principal, puede usar la palabra clave principal en el marco para acceder a la ventana principal.
14. Problema de carga corporal
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 lee completamente la etiqueta del cuerpo.
[Nota] Este problema aún no se ha verificado y se modificará después de la verificación.
[Nota] Se ha demostrado que los problemas anteriores no existen 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 este elemento aún no se ha cargado.
15. Método del delegado de eventos
Descripción del problema: en IE, use document.body.onload = inyect; donde la función inyect () se ha implementado antes de esto; 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 entre los elementos de los padres accedidos
Descripción del problema: en IE, use obj.ParentElement u obj.ParentNode para acceder al nodo principal de OBJ; Bajo 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: HAND VS CURSOR: PUNTER
Descripción del problema: Firefox no es compatible con la mano, pero es decir, es compatible con el puntero, ambos son indicadores en forma de mano.
Solución: use el puntero de manera unificada.
18. El problema con inntext.
Descripción del problema: InnteText funciona correctamente en IE, pero InnteText no funciona en Firefox.
Solución alternativa: use TextContent en lugar de inntext en navegadores que no son II.
Ejemplo:
La copia del código es la siguiente:
if (navigator.appname.indexof ("explorer")> -1) {
document.getElementById ('Element'). Innertext = "My Text";
} demás{
document.getElementById ('Element'). TextContent = "My Text";
}
[Nota] InnerHTML es compatible con navegadores como IE y Firefox. Otros, como Outerhtml, solo son compatibles con IE, por lo que es mejor no usarlo.
19. Problema de asignación de ancho y altura del objeto
Descripción del problema: la declaración similar a obj.style.height = imgobj.Height in firefox no es válida.
Solución: use obj.style.height = imgobj.height + 'px' en uniforme;
20. Problemas de operación de tabla
Descripción del problema: IE, Firefox y otros navegadores tienen operaciones diferentes en las etiquetas de la tabla. En IE, no está permitido asignar valores internos a la tabla y tr. Cuando se usa JS, usar el método AppendChild no funciona.
Solución:
La copia del código es la siguiente:
// Agregar una línea en blanco a la tabla:
var fila = otable.insertrow (-1);
var celular = document.createElement ("td");
celular.innerhtml = "";
celular.classname = "xxxx";
fila.appendChild (celda);
[Nota] Dado que rara vez uso JS para operar tablas directamente, nunca he encontrado este problema. Se recomienda utilizar conjuntos de marco JS para manipular tablas, como jQuery.
21. Edición de la sangría de la lista UL y OL
Al eliminar la sangría de listas como UL, OL, etc., el estilo debe escribirse como: Estilo de lista: Ninguno; margen: 0px; relleno: 0px;
El atributo de margen es válido para IE y el atributo de relleno es válido para Firefox. ← Esta oración es incorrecta, ver los detalles ↓
[Nota] Este problema aún no se ha verificado y se modificará después de la verificación.
[Nota] Se ha demostrado que en IE, el margen de ajuste: 0px puede eliminar las hendiduras hacia arriba y hacia abajo, en blanco, números de lista o puntos de la lista, y establecer el relleno no tiene ningún efecto en el estilo; En Firefox, el margen de ajuste: 0px solo puede eliminar el espacio en blanco ascendente y hacia abajo, y después de configurar el relleno: 0px solo puede eliminar las sangrías izquierda y derecha, y también debe establecer el estilo de la lista: ninguno para eliminar el número de lista o los puntos. En otras palabras, en IE, puede lograr el efecto final simplemente estableciendo margen: 0px, relleno: 0px y estilo list: ninguno debe establecerse al mismo tiempo en Firefox 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] Es mejor escribir ambos y poner el atributo de opacidad a continuación.
23. Problema de esquina redondeada CSS
IE: Las siguientes versiones de IE7 no admiten esquinas redondeadas.
FF: -Moz-Border-Radius: 4px o -Moz-Border-Radius-Topleft: 4px; -Moz-Border-Radius-Topright: 4px; -Moz-Border-Radius-Bottomleft: 4px; -Moz-Border-Radius-BottomRight: 4px;.
[Nota] El problema de la esquina redondeada es un problema clásico en CSS. Se recomienda utilizar el conjunto JQuery Framework para establecer esquinas redondeadas para dejar estos complejos problemas para que otros piensen.
Hay demasiadas preguntas sobre CSS, e incluso las mismas definiciones de CSS tienen diferentes efectos de visualización en diferentes estándares de página. Una sugerencia adecuada es que la página está escrita en el estándar estándar DHTML, y el uso de tablas rara vez se usa. La definición de CSS debe basarse en el DOM estándar tanto como sea posible, y los navegadores convencionales como IE, Firefox y Opera también se tienen en cuenta. 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 CSS y están más estandarizados.