Este artículo resume los problemas de compatibilidad entre CSS y JavaScript en una gran cantidad de ejemplos. Compártelo para su referencia. El resumen específico es el siguiente:
1. Compatibilidad de estilo CSS
1. Flotación flotante flotante
Las páginas web se desalinean en algunos navegadores, a menudo porque el flotador se usa y no está realmente cerrado, lo cual también es una razón por la cual el DIV no puede adaptarse a la altura. Si el Div Padre no establece flotación pero su Div Hijo Div ha flotado, el Div Padre no puede cubrir todo el Diver Div. Esta situación generalmente ocurre cuando un Div Padre contiene múltiples DIV de niños. Solución:
1) Coloque el flotador para el Div Padre
2) Agregue un DIV vacío después de todos los subdivs (esto es lo que Ext hace actualmente), por ejemplo:
.parent{width:100px;}.son1{float:left;width:20px;}.son2{float:left;width:80px;}.clear{clear: both;margin:0;parding0;height:0px;font-size:0px;}<div> <div></div> <div></div> <div></div>3) Flotador universal cerrado
Agregue el siguiente código al CSS global y agregue class = "ClearFix" al DIV que debe cerrarse, lo que se ha probado y hecho.
<Syle>/* Clear Fix*/. ClearFix: After {content: "."; Display: Block; Height: 0; Clear: Amby; Visibility: Hidden;}. ClearFix {Display: Inline-Block;}/* Ocultar de IE Mac /*/.CLearFix {Display: Block;}/* End On de IE Mac* //* End of ClearFix*/</style>>: Después (Pseudo Object), establece el contenido que ocurre después del objeto, generalmente utilizado junto con el contenido. IE no admite este pseudo objeto y no es compatible con IE Browser, por lo que no afecta el navegador IE/WIN. Este es el más problemático.
4) Desbordamiento: Auto
Simplemente agregue el desbordamiento: Auto a la CSS del Diven Parent. Por ejemplo:
.Parent {ancho: 100px; desbordamiento: auto} .son1 {float: izquierda; ancho: 20px;}. son2 {float: izquierda; ancho: 80px;} <div> <div> </div> <div> </div> </div> </div>El principio es que la razón por la cual los elementos periféricos no se pueden extender bien en el desbordamiento porque el desbordamiento es invisible (ver la explicación de W3C). Ahora solo agregue un "desbordamiento: auto" al elemento periférico, y el resultado es que realmente se puede resolver, excepto IE. A continuación, necesitamos resolver el problema de IE. Agregar "_Height: 1%" resolverá completamente este problema. Lo intenté, pero está bien agregar "_ight: 1%" en IE, así que guárdelo.
2. Corte el léxico
.hh {-o-text-overflow: ellipsis; text-overflow: ellipsis; space blanco: nowrap; desbordamiento: oculto;}Esto significa que después de que se excede la longitud, el texto adicional se cortará solo y terminará con un elipsis. La tecnología es una buena tecnología, y a muchas personas les gusta usarla al azar, pero tenga en cuenta que Firefox no lo admite.
<meta http-oquiv = "x-ua-compatible" content = "ie = 7" />
Agregar esta oración a la página puede hacer que la página sea compatible con IE7
¡Para referencia! Me gustaría recordarte un problema flotante. Presta atención a establecer el ancho y la altura del div. Presta atención a establecer el desbordamiento: oculto; Preste atención al cierre de la pantalla: bloque en línea para los estilos de los padres de Firefox;
3. Cursor: mano y cursor: puntero
Firefox no es compatible con la mano, pero IE es compatible con Pointer
Solución: use el puntero de manera uniforme
4. CSS transparente
Varios navegadores admiten la transparencia de diferentes maneras. Para garantizar que el efecto de transparencia se pueda mostrar normalmente en los navegadores convencionales como IE, Firefox, Chrome, Safari, etc., podemos definir una clase de transparencia, porque debe escribir 3 elementos tan pronto como lo escriba, guardándolo cada vez.
El código específico es el siguiente:
.transparente {filtro: alfa (opacidad = 60); /*Soporte del navegador IE*/-Moz-Opacidad: 0.6; /*Soporte del navegador Firefox*/Opacidad: 0.6; /*Soporte de Chrome, Opera, Safari y otros navegadores*/}5. ancho y acolchado en CSS
En IE7 y FF, el ancho de ancho no incluye relleno, sino en IE6.
2. Compatibilidad de JavaScript
1. Niños y niños
Hay una diferencia en los comportamientos de los niños, los nodos infantiles y los nodos infantiles bajo Firefox proporcionado por IE. Los nodos infantiles bajo Firefox contarán tanto los descansos de línea como los personajes de espacios en blanco como hijos de los nodos padres, mientras que los nodos infantiles y los hijos de IE no lo harán. Por ejemplo:
<div id = "dd">
<div> yizhu2000 </div>
</div>
Se ve un DIV con ID DD con nodos infantiles bajo IE. El número de niños es 1 y tres bajo FF. Podemos ver en el espectador de DOM de Firefox que sus nodados son ["/n", div, "/n"].
Para simular las propiedades de los niños bajo Firefox podemos hacer esto:
if (typeof (htmlelement)! = "Undefined" &&! window.opera) {htmlelement.prototype .__ definegetter __ ("children", function () {for (var a = [], j = 0, n, i = 0; i <this.childnodes.length; i ++) {n = this.chChillnodes [ie]; 1) {a [j ++] = n;2. Firefox e IE eventos
Window.Event solo se puede usar en IE, no en Firefox, porque el evento Firefox solo se puede usar en la escena donde ocurre el evento. Firefox debe agregar el evento desde la fuente para el paso de los parámetros. IE ignora este parámetro y usa Window.event para leer el evento.
Por ejemplo, el siguiente método para obtener la posición del mouse en IE:
<Botton onClick = "onClick ()"> Obtenga la coordenada horizontal del clic del mouse </boton> <script type = "text/javascript"> function onclick () {alert (event.clientx);} </script>Necesita ser cambiado a
<Button onClick = "onClick (event)"> get outerhtml </boton> <script type = "text/javascript"> function onClick (event) {event = event || Window.event; alerta (event.clientx);} </script>Solo úsalo en ambos navegadores
3. Problema de adquisición de objetos HTML
Firefox Get Method Docum.getElementById ("IdName")
IE usa document.idname o document.getElementById ("idname")
Solución: use document.getElementById ("idname");
4. Problema de constante
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.
5. Problema de marco
El siguiente cuadro es un ejemplo:
<Frame src = "xxx.html" id = "frameID" name = "franameame" />
a) Objeto de marco de acceso
Es decir: use window.frameid o window.framename para acceder a este objeto de cuadro.FrameId y FrameName pueden tener el mismo nombre;
Firefox: solo Window.framename se puede usar para acceder a este objeto de cuadro;
Además, tanto en IE como en Firefox, puede usar Window.document.getElementById ("FrameId") para acceder a este objeto de cuadro;
b) Contenido de marco de interruptor
Tanto en IE como en Firefox, puede usar Windows.document.getElementById ("testframe"). Src = "xxx.html" o window.framename.location = "xxx.html" para cambiar el contenido de la trama;
Si necesita pasar los parámetros en el marco de regreso a la ventana principal (tenga en cuenta que no es un abridor, sino un padre), puede usar el padre en el marco para acceder a la ventana principal. Por ejemplo:
parent.document.form1.filename.value = "aqing";
6. Problema corporal
El cuerpo de Firefox existe antes de que el navegador lea completamente la etiqueta del cuerpo; mientras que el cuerpo de IE debe existir después de que el navegador lee completamente la etiqueta del cuerpo;
7. La diferencia entre Firefox e IE Elemento principal (ParentElement)
Es decir: obj.parentelement
Firefox: OBJ.ParentNode
Solución: Debido a que tanto Firefox como IE admiten DOM, todos usan obj.ParentNode
8. Problema de texto innato
Innertext funciona normalmente en IE, pero intetext no funciona en Firefox, se requiere TextContent;
Solución:
if (navigator.appname.indexof ("explorer")> -1) {document.getElementById ('elemento'). inNTEXT = "mi texto";} else {document.getElementById ('element'). TextContent = "mi texto";};};};};};};9. La diferencia entre AJAX obtener xmlhttp
var xmlhttp; if (window.xmlhttprequest) {xmlhttp = new xmlhtttprequest ();} elseif (window.activexoBject) {// ie método de adquisición xmlhttp = new ActiveXObject ("microsoft.xmlhttp");}Nota: en IE, el contenido del método xmlhttp.send (contenido) puede estar vacío, mientras que Firefox no puede ser nulo. Enviar ("") debe usarse, de lo contrario ocurrirá un error 411.
Espero que este artículo sea útil para la programación web de todos.