A menudo hay muchos problemas de incompatibilidad entre IE y FF en el diseño de páginas web CSS. ¡Aquí se presentan algunas posibilidades comunes y sus soluciones!
1. Utilice! Importante para resolver las diferencias de diseño entre IE y Mozilla Importante es una sintaxis definida en CSS1. Su función es aumentar la prioridad de la aplicación de reglas de estilo específicas. El punto más importante es que IE nunca ha admitido esta sintaxis, pero otros navegadores sí. Por lo tanto, podemos usar esto para definir diferentes estilos para IE y otros navegadores. Por ejemplo, definimos un estilo como este:
Código fuente de ejemplo
[www.downcodes.com] .prueba de color{
borde:20pxsolid#60A179!importante;
borde:20pxsolid#00F;
relleno: 30px;
ancho: 300 px;
}
Al navegar en Mozilla, puede comprender la prioridad de !important, por lo que se muestra el color #60A179; cuando navega en IE, no puede comprender la prioridad de !important, por lo que se muestra el color #00F.
2. Resuelva el problema de que el estilo de desplazamiento no se muestra después de acceder al hipervínculo. Cambiar el orden de las propiedades CSS: el orden estándar debe ser:
a:enlace—a:visitado—a:hover—a:activo
3. Cómo mostrar el contenido en Li con elipses después de que excede la longitud Código fuente de ejemplo
[www.downcodes.com] margen:3px - significa que todos los lados son de 3px;
margen:3px 5px - significa que el valor de arriba y abajo es 3px, y el valor de derecha e izquierda es 5px
margen: 3px 5px 7px: indica que el valor de arriba es 3, el valor de derecha e izquierda es 5 y el valor de abajo es 7
margen: 3px 5px 7px 5px: los cuatro valores representan arriba, derecha, abajo, izquierda, arriba, derecha, abajo e izquierda;
5. Resuelva el problema de que IE no puede mostrar PNG transparente correctamente: agregue código en el encabezado Código fuente de ejemplo
[www.downcodes.com]
función correctaPNG()
{
for(var i=0; i {
var img = documento.imagenes[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id)? "id='" + img.id + "' ": ""
var imgClass = (img.className)? "class='" + img.className + "' ": ""
var imgTitle = (img.title)? "título='" + img.title + "' " : "título='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "izquierda") imgStyle = "float:left;" + imgStyle
if (img.align == "derecha") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:mano;" + imgStyle
var strNewHTML = " + "estilo="" + "ancho:" + img.ancho + "px; alto:" + img.alto + "px;" + imgStyle + ";"
+ "filtro:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src='" + img.src + "', sizingMethod='escala');">"
img.outerHTML = strNewHTML
yo = i-1
}
}
}
window.attachEvent("onload", correctoPNG);
Utilice (relleno:0; margen:0; estilo de lista:interior;)
O (padding:0; margin:0; list-style:none;) para lograr compatibilidad
7. Solución a la diferencia de 2px en la interpretación del modelo BOX en Firefox e IE Código fuente de ejemplo
[www.downcodes.com] div{
margen:30px!importante;
margen: 28px;
}
Tenga en cuenta que no se debe invertir el orden de estos dos márgenes. Según lo mencionado anteriormente, IE no admite! Importante, por lo que en realidad se interpreta así en IE:
Código fuente de ejemplo
[www.downcodes.com] div{
marcado: 30px;
margen: 28px
}
Si hay definiciones repetidas, se ejecutará la última, por lo que no puede simplemente escribir margin:XXpx!important;
8. Efecto predeterminado del margen El contenido del div está centrado de forma predeterminada en IE y alineado a la izquierda en FF de forma predeterminada. La forma de centrar el contenido de ff es agregar el código margin:auto;
