La compatibilidad de CSS con los navegadores a veces causa dolor de cabeza a las personas. Quizás cuando comprenda las técnicas y principios, no será difícil recopilar los consejos de compatibilidad para IE7, 6 y Fireofx de Internet. Para la transición a web2.0, intente escribir código en formato xhtml. DOCTYPE afecta el procesamiento de CSS. Como estándar W3C, se debe agregar una declaración DOCTYPE.
Consejos CSS
1.Problema de centrado vertical de div
vertical-align:middle; Aumente el espacio entre líneas a la misma altura que toda la línea DIV-height:200px Luego inserte el texto y quedará centrado verticalmente. La desventaja es que necesitas controlar el contenido y no incluirlo en otra línea.
2. El problema de duplicar el margen
El margen establecido para que un div conjunto flote se duplicará en IE. Este es un error que existe en ie6. La solución es agregar display:inline; dentro de este div.
Por ejemplo:
<#div id="imfloat">
El CSS correspondiente es
#imflotar{
flotador: izquierda;
margin:5px;/*En IE, se entiende como 10px*/
display:inline;/*En IE, se entenderá como 5px*/}
3. Doble distancia generada por flotación, es decir.
#box{ float:left; width:100px; margin:0 0 0 100px; //En este caso, IE generará una distancia de 200px display:inline;
Hablemos de los dos elementos block e inline en detalle: la característica del elemento block es que siempre comienza en una nueva línea y se pueden controlar la altura, el ancho, la altura de la línea y los márgenes (elemento de bloque); del elemento en línea es eso, y otros Los elementos están en la misma línea y no se pueden controlar (elementos en línea);
#box{ display:block; //Puedes simular elementos en línea como elementos de bloque display:inline; //Logra el efecto de organizar en la misma fila diplay:table;
4 problemas de IE con ancho y alto
IE no reconoce la definición de min-, pero de hecho trata el ancho y alto normales como si hubiera un min. 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, puedes hacer esto:
#box{ ancho: 80px; alto: 35px;}html>cuerpo #box{ ancho: auto; alto: auto; ancho mínimo: 80px;
5. Ancho mínimo de página
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 que el diseño siempre sea correcto. Pero IE no reconoce esto y, de hecho, trata el ancho como el ancho mínimo. Para que este comando también esté disponible en IE, puede colocar un <div> debajo de la etiqueta <body>, luego especificar una clase para el div y luego diseñar el CSS de esta manera:
#contenedor{ancho mínimo: 600px; ancho:expresión(document.body.clientWidth <600? "600px": "auto");}
El primer ancho mínimo es normal; pero el ancho de la segunda línea usa Javascript, que sólo es reconocido por IE, lo que también hará que su documento HTML sea menos formal. En realidad, implementa el ancho mínimo mediante el juicio de Javascript.