Efecto en IE
Efectos en Mozilla Firefox
Esto se debe a un error en la interpretación de IE de la distancia entre cuadros (consulte "Problemas con modelos flotantes" de onestab). Nunca resolví este problema hasta que traduje "Table vs. CSS: una batalla de vida o muerte". Un consejo del autor me ayudó a encontrar una solución: use! Importante.
!important es una sintaxis definida en CSS1. Su función es aumentar la prioridad de aplicación de reglas de estilo específicas (consulte: explicación de W3.org). El formato de sintaxis { sRule!important } se escribe al final de la definición, por ejemplo:
cuadro{color:rojo!importante;}
El punto más importante es: 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:
.prueba de color {
borde: 20px sólido #60A179! Importante;
borde: 20px sólido #00F;
relleno: 30px;
ancho: 300px;
}
Al navegar en Mozilla, puedes entender la prioridad de !important, por lo que se muestra el color #60A179:
Al navegar en IE, no se entiende la prioridad de !important, por lo que se muestra el color #00F:
Como puede ver, usando !important, podemos establecer diferentes estilos para navegadores IE y no IE, simplemente agregue !important después del estilo del navegador que no es IE. Por lo tanto, la diferencia de visualización de 2 píxeles en mi página de inicio mencionada anteriormente se puede resolver fácilmente:
PADDING-TOP: 11px! Importante;
ACOLCHADO SUPERIOR: 9px;
!important definitivamente se convertirá en una herramienta poderosa para el diseño CSS, recuérdelo y domínelo :)
