1. CSS HACK
Los siguientes dos métodos pueden resolver casi todos los HACK actuales.
1. !important
Con el soporte de IE7 para !important, el método !important ahora es solo para el HACK de IE6 (preste atención a la escritura. Recuerde que la posición de la declaración. para estar por adelantado.)
2. IE6/IE77 para Firefox
*+html y *html son etiquetas específicas de IE, que no son compatibles por Firefox todavía. Y *+html Es una etiqueta única para IE7
Nota:
*+html HACK para IE7 debe asegurarse de que exista la siguiente declaración en la parte superior del HTML:
http://www.w3.org/TR/html4/loose.dtd ">
2. Cierre de flotador universal.
Para conocer el principio de flotación transparente, consulte [Cómo borrar flotadores sin marcas estructurales].
Agregue el siguiente código a
CSS global y agregue class="
clearfix" al div que debe cerrarse. Funciona siempre.
.clearfix:después
{
contenido:".";
display:block
height:0;
clear:both;
visibilidad:hidden
}
.clearfix
{
display:inline-block
}
.clearfix {display:bloquear;}
3. Otros consejos de compatibilidad
1. Configurar el relleno en div en FF hará que el ancho y el alto aumenten, pero IE no (se puede resolver con !importante)
2. Centrar el problema
verticalmente. línea: la altura se establece en la misma altura que el div actual y luego se alinea verticalmente: medio (tenga cuidado de no ajustar el contenido).
2). Céntrelo horizontalmente: 0 automático. no omnipotente)
3. Si necesita agregar contenido en la etiqueta a Para el estilo superior, debe configurar display: block (común en etiquetas de navegación)
4. La diferencia en la comprensión de BOX entre FF e IE conduce a 2px; diferencia y problemas como el margen de un div configurado para flotar duplicándose en IE
5. La etiqueta ul está en FF. Hay estilo de lista y relleno de forma predeterminada a continuación. Es mejor declararlo con anticipación para evitar problemas innecesarios (. Común en etiquetas de navegación y listas de contenido)
6. No establezca la altura del div como un contenedor externo. Es mejor agregar desbordamiento: oculto. Para lograr un alto grado de adaptabilidad.
7. Acerca del cursor de mano: puntero. Y hand solo es aplicable a IE
1. La mayoría de los estilos CSS para Firefox IE6 e IE7
ahora están pirateados con !Important. Para las pruebas de IE6 y Firefox, puede ser normal,
pero IE7 puede interpretar correctamente
.¡Hará que la página no se muestre como se requiere! Encontré un buen truco
para
IE7 usando "*+html". Ahora navegue con IE7 y no debería haber ningún problema.Ahora escriba un CSS como este:
#1 { color: #333 }
* html #1 { color: #666 }
*+html #1 { color: #999 }
Luego el color de fuente se muestra como #333 en Firefox; El color de fuente es #666 en IE6 y #999 en IE7.
2La definición de estilo principal para
problemas de centrado en el diseño CSS
es la siguiente:cuerpo {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto }
Descripción:
Primero defina TEXT-ALIGN en el padre; elemento: centro; Esto significa que el contenido dentro del elemento principal está centrado; esta configuración es suficiente para IE.
Pero no se puede centrar en mozilla. La solución es agregar "MARGIN-RIGHT: auto;MARGIN-LEFT: auto;" al configurar el elemento secundario.
Cabe señalar que si desea utilizar este método para centrar toda la página, se recomienda no configurarlo. en un En un DIV, puede dividir varios divs en secuencia,
simplemente defina MARGIN-RIGHT: auto;MARGIN-LEFT: auto en cada div dividido.
3 Diferentes interpretaciones del modelo de caja
#box{ width:600px; //for ie6.0- width:500px; //for ff+ie6.0}
#box{ width:600px!important //para ff width: 600px; //para ff+ie6.0 ancho:500px; //para ie6.0-}
4 Distancia doble generada por ie flotante
#box{ float:left; margin:0 0 0 100px; kind Bajo estas circunstancias, IE generará una distancia de 200px display:inline; //Ignora el flotante} Hablemos
de los dos elementos block e inline en detalle. Las características del elemento Block son: comenzar siempre en una nueva línea, altura.
, ancho, alto de línea, los márgenes se pueden controlar(
elementos de bloque) las características de los elementos en línea son: en la misma línea que otros elementos,... no se pueden controlar (elementos en línea);
/pueden ser elementos en línea Simular como un elemento de bloque display:inline; //Logra el efecto de organizar en la misma fila diplay:table;
IE no reconoce la definición de min-, pero de hecho trata el ancho y el alto normales como si fueran elementos
en línea.hay mín. Este es un gran problema. Si solo usa ancho y alto,
estos dos valores no cambiarán en un navegador normal. Si solo usa ancho mínimo y alto mínimo, el ancho y el alto no se establecen en absoluto. bajo IE.
Por ejemplo, si desea establecer una imagen de fondo, este ancho es más importante. Para resolver este problema, puede hacer esto:
#box{ ancho: 80px; alto: 35px;}html>body #box{ ancho: auto; alto: min-width: 80px;}
6 páginas Ancho mínimo
min-width es un comando CSS muy conveniente. Puede especificar que el ancho mínimo de un elemento no puede ser menor que un cierto ancho, para garantizar que el diseño sea siempre correcto. Pero IE no reconoce esto
y, de hecho, trata el ancho como el ancho mínimo. Para que este comando funcione en IE, puede colocar un
Luego diseñe el CSS de esta manera:
#container{ min-width: 600px width; :expression (document.body.clientWidth < 600? "600px": "auto" );}
El primer ancho mínimo es normal, pero el ancho en la línea 2 usa Javascript, que solo es reconocido por IE, lo que también lo hará; El documento HTML no es muy formal. En realidad, implementa el ancho mínimo mediante el juicio de Javascript.
También se puede escribir directamente como:
#contenedor{ ancho mínimo:600px; *ancho:600px;}
De esta manera, el ancho mínimo es 600PX independientemente de IE o FF.
7 Borre el
.hackbox flotante{ display:table; //Muestre el objeto como una tabla de nivel de elemento de bloque} o .hackbox{ clear:both;}
o agregue. : después (pseudoobjeto), establece el contenido que aparece después del objeto, generalmente utilizado junto con el contenido. IE no admite este pseudoobjeto y no es compatible con los navegadores IE,
por lo que no afecta a los navegadores IE/WIN. Lo más problemático de esto... #box:after{ contenido: "."; pantalla: bloque; altura: 0; ambos; visibilidad: oculto;}
8 DIV texto IE flotante produce 3 píxeles
El objeto de la izquierda El lado delerror
está flotante y el lado derecho se coloca usando el margen izquierdo del parche exterior. El texto en el objeto derecho estará a 3 píxeles del lado izquierdo
. left{ float:left; width:50 %;}#right{ width:50%;}*html #left{ margin-right:-3px; //Esta oración es la clave}
Código HTML
9 Selector de atributos (esto no puede considerarse compatible, es un error al ocultar css)
p[id ]{}div[id]{}
Esto es para IE6.0 y las versiones inferiores a IE6.0 están ocultas.
Todavía hay una diferencia entre los selectores de atributos y los subselectores en FF y OPera. forma, mientras que el alcance de los selectores de atributos es relativamente grande, como p En [id], todas las etiquetas p con identificadores tienen el mismo estilo
10 IE Problema del escondite
Cuando la aplicación div es compleja, hay algunos enlaces. en cada columna, como DIV. En este momento, el problema del escondite ocurre fácilmente.
Parte del contenido no se puede mostrar. Cuando el mouse selecciona esta área, se descubre que el contenido está efectivamente en la página.
Solución: use el atributo de altura de línea para #layout o use altura y ancho fijos para #layout. Mantenga la estructura de la página lo más simple posible.
11 No adaptación de altura
La no adaptación de altura significa que la altura de la capa exterior no se puede ajustar automáticamente cuando la altura del objeto de la capa interior cambia, especialmente cuando el objeto de la capa interior utiliza
margen o paddign.
Ejemplo:
Contenido en p objeto
CSS: #box {background-color:#eee }
#box p {margin-top: 20px;margin - bottom: 20px; text-align:center; }
Solución: agregue 2 objetos div vacíos encima y debajo del código CSS: .1{height:0px;overflow:hidden;} o agregue el atributo de borde al DIV.
El siguiente método es un método de análisis desde otro ángulo:
Métodos de manejo de ERRORES del navegador compilados (parte) para compartir con amigos a quienes les gusta el diseño web:
1. Asterisco*
IE puede reconocer *, pero los navegadores estándar como FF no pueden reconocer *.
Ejemplo: p { color:amarillo; *color:rojo;}
Los similares son
+ signo más
Sólo IE explica
p{color:rojo; +color:azul}
IE muestra azul y FF muestra rojo
2.!importante
IE6 y versiones anteriores ignorarán este estilo, IE7 FF lo admitirá;
p{color:rojo !importante;color:amarillo;}
IE7 FF mostrará rojo IE6 amarillo
Tenga en cuenta aquí que el método !important solo es ignorado por IE6 y versiones inferiores después de seguir el formato anterior. Se pueden usar universalmente otros métodos para aumentar el peso del estilo.
3. Subrayar.
IE6 y versiones inferiores usarán este estilo, otros serán ignorados.
p{color:rojo; _color:azul}
4. Notas:
p{color:rojo};
Este estilo se puede aplicar y mostrar en IE6, pero no se procesará en IE5 y versiones inferiores, por lo que se puede distinguir para IE5/6.
5. @IMPORTAR:
Utilice la URL en @IMPORT para importar estilos. El uso estándar es poner el valor en la URL entre comillas, de la siguiente manera @IMPORT URL("newstyle.css"); este uso puede ser compatible con los navegadores IE5 y superiores y FF. lograr Los estilos de IE4 se procesan por separado.
Además, existe otro método:
@IMPORTAR URL("noie.css" pantalla);
La pantalla es una opción que se usa para especificar el tipo de dispositivo, la pantalla se usa para la visualización de la pantalla y la impresión se usa para imprimir la visualización del dispositivo. Sin embargo, IE no admite este método y todos los navegadores IE pueden distinguir entre IE y FF.
6. Selector de atributos: se utiliza para seleccionar objetos con atributos específicos.
abarcar[clase=izquierda]{color:azul}
abarca[título]{color:rojo;}
IE6 no lo admite, pero funciona bien en FF, por lo que IE y FF se pueden procesar por separado.
En el desarrollo real, IE y FF a menudo deben procesarse por separado. Puede utilizar el siguiente código:
#contenido{
color: rojo;
}
[xmlnx] #contenido{
color: azul
}
Creo que este método es muy práctico y se usa con frecuencia. Se lo recomiendo a mis amigos. Si necesitan una explicación más detallada, puedo publicarlo nuevamente.
7. Selector de subobjetos:
lapso>p{color:rojo}
IE6 tampoco es compatible y también se puede utilizar para distinguir IE y FF.
8. Método Tantek
#contenido{
color: azul;
familia de voces:""}"";
familia de voces: heredar;
color: rojo;
}
Después de usar voice-family en el código anterior, el siguiente color: rojo no será analizado por los navegadores IE5.5 e inferiores. Por lo tanto, el color del texto aparecerá rojo en IE6/7/FF y en IE5.5 e inferiores. aparecerá azul en el navegador;
Además, existe otra forma de abordar la familia de voces:
#contenido{
color: rojo;
familia de voces:"}"
familia de voces: heredar;
color: azul;
}
Con este método, el texto en los navegadores IE6 e inferiores y en el navegador FF aparecerá en rojo, mientras que el texto en los navegadores IE5 e inferiores aparecerá en azul.
9. Atributos de escape
p{anchoidth:200px;}
Se ignorarán IE5.5 y versiones inferiores. Nota: El carácter de barra invertida no puede aparecer antes del 0 al 9 o de la letra af.
10. Comentarios condicionales en IE 1. Introducción a los comentarios condicionales
Los comentarios condicionales en IE tienen una excelente capacidad para distinguir las versiones de IE de las de IE y las que no lo son, y se utilizan comúnmente en el diseño WEB.
método de pirateo.
Los comentarios condicionales solo se pueden utilizar en IE5 y superiores.
Si tiene varios IE instalados, los comentarios condicionales se basarán en la versión más alta de IE.
La estructura básica de los comentarios condicionales es la misma que la de los comentarios HTML (). Por lo tanto, los navegadores distintos de IE los tratarán como comentarios normales y los ignorarán por completo.
IE utilizará la condición if para determinar si se analiza el contenido del comentario condicional como el contenido de una página normal.
2. Atributos de anotación condicional
gt: mayor que, seleccione la versión condicional o superior, excluyendo la versión condicional
lt: menor que, seleccione la versión debajo de la versión condicional, excluyendo la versión condicional
gte: mayor o igual, seleccione la versión condicional o superior, incluida la versión condicional
lte: menor o igual, seleccione la versión debajo de la versión condicional, incluida la versión condicional
!: Seleccione todas las versiones excepto la versión condicional, independientemente de si es alta o baja, cómo utilizar los comentarios condicionales.
Preste atención a reemplazar el <> en el código con el correspondiente signo mayor o menor que en inglés.
El siguiente código es un comentario condicional que se ejecuta en navegadores que no son IE.
No estás utilizando Internet Explorer
Está utilizando Internet Explorer versión 6 o un navegador que no sea IE