Recopilación de consejos de compatibilidad de CSS para los navegadores IE y Firefox

Autor：Eve Cole Fecha de actualización：2010-08-18 17:35:15

Consejos comunes de compatibilidad con CSS

Intente escribir código en formato xhtml y DOCTYPE afecta el procesamiento de CSS. Como estándar W3C, se debe agregar una declaración DOCTYPE.

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 #imfloat{
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:

#container{ ancho mínimo: 600px; ancho:exPRession(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.

6. El texto IE flotante DIV produce un error de 3 píxeles

El objeto de la izquierda flota y el de la derecha se coloca utilizando el margen izquierdo del parche exterior. El texto dentro del objeto de la derecha estará espaciado 3 píxeles desde la izquierda.

#box{ flotador:izquierda; ancho:800px;}
#izquierda{ flotador:izquierda; ancho:50%;}
#derecha{ancho:50%;}
*html #left{ margin-right:-3px; //Esta oración es la clave}
<div id="caja">
<div id="izquierda">＜/div>
<div id="derecho">＜/div>
</div>
http://www.devdao.com/
http://yuanma.devdao.com/
7.IE problema del escondite

Cuando la aplicación div es compleja, hay algunos enlaces en cada columna y pueden ocurrir fácilmente problemas de escondite en los DIV.

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.

8. La división flotante está cerrada; flotación clara y adaptable;

①Por ejemplo: <#div id="floatA" ><#div id="floatB" ><#div id="NOTfloatC" > NOTfloatC aquí no quiere continuar traduciendo, pero quiere organizarse hacia abajo. (Las propiedades de floatA y floatB se han establecido en float:left;)

Este código funciona bien en IE, el problema está en FF. La razón es que NOTfloatC no es una etiqueta flotante y la etiqueta flotante debe estar cerrada. Agregue <#div class="clear"> entre <#div class="floatB"> <#div class="NOTfloatC">. Este div debe prestar atención a su posición y debe ser el mismo que los dos divs con. atributos flotantes No puede haber una relación anidada entre niveles; de lo contrario, se producirá una excepción. Y defina el estilo claro de la siguiente manera: .clear{ clear:both;}

② No establezca la altura del div como un contenedor externo para permitir que la altura se adapte automáticamente, agregue overflow:hidden en el contenedor cuando contiene un cuadro flotante, la adaptación automática de altura no es válida en IE. En este momento, se debe activar IE. El atributo privado de diseño (¡el IE malvado!) se puede hacer usando zoom:1;, logrando así compatibilidad.
Por ejemplo, un contenedor se define de la siguiente manera:

.colwrapper {desbordamiento: oculto; zoom: 1; margen: 5px automático;}

③Para la composición tipográfica, la descripción CSS que más utilizamos probablemente sea float:left. A veces necesitamos crear un fondo unificado detrás del div flotante en la columna n, por ejemplo:

Por ejemplo, queremos establecer el fondo de la página en azul para que el color de fondo de las tres columnas sea azul. Sin embargo, encontraremos que a medida que el centro izquierdo se extiende hacia abajo, la página en realidad conserva la misma altura. La razón es que la página no es un atributo flotante y nuestra página no se puede configurar para que flote porque necesita estar centrada, por lo que debemos resolverlo de esta manera.

La solución es incrustar un DIV izquierdo flotante con un ancho del 100%.

④Cierre flotante universal (¡muy importante!)

Para conocer el principio de flotación clara, consulte [Cómo borrar flotaciones sin marcado estructural]. Agregue el siguiente código al CSS global y agregue class="clearfix" al div que debe cerrarse.

/* Borrar corrección */
.clearfix:después {contenido:"."; mostrar:bloquear; claro:ambos visibilidad:oculto;
.clearfix { mostrar: bloque en línea }
/* Ocultar de IE Mac */
.clearfix {display:bloquear;}
/* Finalizar la ocultación de IE Mac */
/* fin de clearfix */

O configúrelo así: .hackbox{ display:table; //Muestra el objeto como una tabla de nivel de elemento de bloque}

9. La altura no se puede ajustar

La altura no adaptable significa que la altura exterior no se puede ajustar automáticamente cuando cambia la altura del objeto interior, especialmente cuando el objeto interior utiliza margen o paddign.

ejemplo:

#box {color de fondo:#eee }
#box p {margen superior: 20 px; margen inferior: 20 px; alineación de texto: centro;
<div id="caja">
<p>Contenido del objeto p</p>
</div>

Solución: agregue dos objetos div vacíos encima y debajo del código CSS: .1{height:0px;overflow:hidden;} o agregue el atributo de borde al DIV.

10. ¿Por qué hay espacios en blanco debajo de las imágenes en IE6?

Hay muchas técnicas para resolver este ERROR. Puede cambiar el diseño del html o configurar el img para mostrar: bloquear o configurar el atributo de alineación vertical en alineación vertical: superior.

el texto inferior medio inferior se puede resolver todo.

11. Cómo alinear el texto con el cuadro de entrada de texto

Agregue vertical-align:middle;

12. ¿Existe alguna diferencia entre id y clase definida en los estándares web?

(1) Los estándares web no permiten ID repetidas. Por ejemplo, no se permite que div id="aa" se repita dos veces, y la clase define una clase, en teoría, se puede repetir infinitamente, por lo que se requieren múltiples definiciones. Se pueden utilizar referencias.

(2). Cuestión prioritaria de atributos.

La prioridad de ID es mayor que la clase, vea el ejemplo anterior

(3) Es conveniente para scripts de clientes como JS. Si desea realizar operaciones de script en un objeto en la página, puede definir una ID para él. De lo contrario, solo podrá encontrarlo recorriendo los elementos de la página y especificándolo. atributos específicos. Esto es relativamente una pérdida de tiempo y recursos, pero mucho menos simple que una identificación.

13. Consejos para mostrar el contenido en LI con elipses después de que exceda la longitud

Esta técnica es aplicable a los navegadores IE y OP.

<tipo de estilo="texto/css">
<!--
li {
ancho: 200 px;
espacio en blanco:nowrap;
desbordamiento de texto: puntos suspensivos;
-o-text-overflow: puntos suspensivos;
desbordamiento: oculto;
}

-->
</estilo>

14. ¿Por qué IE no puede configurar el color de la barra de desplazamiento de acuerdo con los estándares web?

La solución es reemplazar el cuerpo con html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<tipo de estilo="texto/css">

</estilo>

15. ¿Por qué no puedo definir un contenedor con una altura de aproximadamente 1 px?

Este problema en IE6 se debe a la altura de fila predeterminada y existen muchas técnicas para resolverlo, como por ejemplo:
desbordamiento: zoom oculto: 0,08 altura de línea: 1 px

16. ¿Cómo hacer que la capa se muestre en Flash?

La solución es establecer transparencia para FLASH.

17. Cómo centrar verticalmente una capa en el navegador

Aquí utilizamos el posicionamiento absoluto porcentual y la técnica de utilizar valores negativos fuera del parche. El tamaño del valor negativo es su propio ancho y alto dividido por dos.

Consejos de compatibilidad de CSS para Firefox e IE

1. Problema de centrado de división

El div ya está centrado cuando el margen izquierdo y el margen derecho están configurados en automático. Esto no funciona con IE. IE necesita configurar el cuerpo para que esté centrado. el contenido dentro del elemento principal está centrado.

2. El borde y el fondo del enlace (una etiqueta)

Para agregar un borde y un color de fondo a un enlace, debe configurar display: block y float: left para garantizar que no haya saltos de línea. En referencia a la barra de menú, establecer la altura de una barra de menú es para evitar la dislocación de la visualización del borde inferior. Si no se establece la altura, se puede insertar un espacio en la barra de menú.

3. El problema de que el estilo de desplazamiento no aparece después de acceder al hipervínculo

El estilo de hipervínculo en el que se hizo clic y se visitó ya no está activo. Muchas personas deben haber encontrado este problema. La solución es cambiar el orden de los atributos CSS: LVHA.

Código:

4. Cursor del dedo del cursor

cursor: el puntero puede mostrar la forma del dedo del cursor en IE FF al mismo tiempo, la mano solo se puede mostrar en IE

5.Relleno y margen de UL

La etiqueta ul tiene un valor de relleno de forma predeterminada en FF, pero en IE solo el margen tiene un valor de forma predeterminada, por lo que definir ul{margin:0;padding:0;} primero puede resolver la mayoría de los problemas.

6. Etiqueta FORMATO

Esta etiqueta tendrá automáticamente algunos márgenes en IE, mientras que en FF el margen es 0. Por lo tanto, si desea mostrarla de manera consistente, es mejor especificar el margen y el relleno en CSS. Para solucionar los dos problemas anteriores, mi CSS en general. , el estilo ul, form{margin:0;padding:0;} se define primero, por lo que no tendrás que preocuparte por esto más adelante.

7. Problema de inconsistencia de la explicación del modelo BOX

La interpretación del modelo BOX en FF e IE es inconsistente, lo que resulta en una diferencia de 2 píxeles. Consejos de solución: div{margin:30px!important;margin:28px;} Tenga en cuenta que el orden de los dos márgenes no se debe invertir. atributo importante, pero los navegadores no pueden reconocerlo. Entonces, en IE, en realidad se interpreta así:

Si div{maring:30px;margin:28px} se define repetidamente, se ejecutará el último, por lo que no puede simplemente escribir margin:xx px!important;#box{ width:600px //for ie6.0- w; idth:500px; //para ff+ie6.0}
#box{ ancho:600px!importante //para ff ancho:600px; //para ff+ie6.0 ancho /**/:500px; //para ie6.0-}

8. Selector de atributos (esto no se puede considerar compatible, es un error al ocultar CSS)

p[id]{}div[id]{}

Esto está oculto para IE6.0 y versiones inferiores a IE6.0, y funciona en FF y Opera. Todavía hay una diferencia entre los selectores de atributos y los subselectores. El alcance de los subselectores se reduce en forma, mientras que el alcance de los atributos. Los selectores son relativamente grandes, como p [id], todas las etiquetas p con id son del mismo estilo.

9.El medio más despiadado: !importante

Si realmente no hay forma de resolver algunos problemas detallados, puede utilizar esta técnica. FF analizará automáticamente "! Importante" primero, pero IE lo ignorará.

.tabd1{
fondo:url(/res/images/up/tab1.gif) no-repeat 0px 0px !importante /*Estilo para FF*/
fondo:url(/res/images/up/tab1.gif) no-repetir 1px 0px /* Estilo para IE */}

Vale la pena señalar que la frase xxxx !important debe colocarse encima de otra frase.

10. Problema de valor predeterminado de IE y FF

Tal vez te hayas estado quejando de por qué tienes que escribir CSS diferente específicamente para IE y FF, por qué IE es un dolor de cabeza, y luego, mientras escribes CSS, maldices ese maldito M$ IE. De hecho, IE no tiene el soporte estándar. Para CSS que hacemos es tan repugnante como imaginas, pero la clave es que los valores predeterminados de IE y FF son diferentes. Una vez que domines esta técnica, descubrirás que no es tan difícil escribir CSS así. es compatible con FF e IE. ¡Quizás para CSS simple, no lo necesites en absoluto!

Todos sabemos que cuando un navegador muestra una página web, decidirá cómo mostrarla en función de la hoja de estilo CSS de la página web, pero es posible que no necesariamente describamos todos los elementos en detalle en la hoja de estilo y, por supuesto, allí. No es necesario hacer eso, por lo que para aquellos atributos que no están descritos, el navegador usará el método predeterminado incorporado para mostrar, como texto. Si no especifica un color en CSS, el navegador usará negro o sistema. color para mostrar el fondo de div u otros elementos, si no se especifica en css, el navegador lo configurará en blanco o transparente, y así sucesivamente para otros estilos no definidos. Por lo tanto, la razón fundamental por la que muchas cosas se muestran de manera diferente entre FF e IE es que sus visualizaciones predeterminadas son diferentes. En cuanto a cómo se debe mostrar este estilo predeterminado, sé si existen estándares correspondientes en w3 para estipularlo, por lo que no. Necesito comentar sobre este punto. Culpe a IE.

11. ¿Por qué el texto en FF no puede expandir la altura del contenedor?

Los contenedores con valores de altura fijos en los navegadores estándar no se estirarán como en IE6. Entonces, si quiero tener una altura fija y estirarme, ¿qué configuraciones debo realizar? La solución es eliminar la altura y establecer min-height:200px aquí, para cuidar a IE6 que no conoce min-height, se puede definir así:

{
altura:auto!importante;
altura: 200 px;
altura mínima: 200 px;
}

12.Cómo hacer que los campos largos continuos se ajusten automáticamente en Firefox

Como todos sabemos, en IE, puedes usar Word-wrap:break-word directamente. En FF, usamos la técnica de inserción JS para resolver el problema.

<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<scrīpt tipo="text/javascrīpt">
/* <![CDATA[ */
función toBreakWord(el, intLen){
varōbj=document.getElementById(el);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"
";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+="
"+cadenaContenido;
obj.innerHTML=strTemp;
}
if(document.getElementById &&!document.all) toBreakWord("ff", 37);
/* ]]> */
</script>

13. ¿Por qué el ancho del contenedor en IE6 es diferente al de FF?

La diferencia en el problema es si el ancho total del contenedor incluye el ancho del borde. Aquí IE6 lo interpreta como 200PX, mientras que FF lo interpreta como 220PX. Entonces, ¿qué causa exactamente el problema? Si elimina el xml en la parte superior del contenedor, encontrará que el problema original radica aquí. La declaración en la parte superior activa el modo qurks de IE.

<?xml versión="1.0" codificación="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Tipo de contenido" content="text/html; charset=gb2312" />
<tipo de estilo="texto/css">

</estilo>
<div ōnclick="alert(this.offsetWidth)">Hacer que Firefox sea compatible con IE</div>

Hay nuevos problemas con la compatibilidad de IE7.0 con CSS, que se resuelven de la siguiente manera.

El primer tipo, CSS HACK

Bpx; /*Para IE7 e IE6*/
_altura:20px; /*Para IE6*/

Presta atención al orden.

El siguiente también es un HACK de CSS, pero no es tan simple como el anterior.

#ejemplo { color: #333 } /* Moz */
* html #ejemplo { color: #666 } /* IE6 */
*+html #ejemplo { color: #999 } /* IE7 */

El segundo es utilizar comentarios condicionales específicos de IE.

<enlace rel="hoja de estilo" tipo="texto/css" href="css.css" />

<enlace rel="hoja de estilo" tipo="texto/css" href="ie7.css" />
<![endif]-->

<enlace rel="hoja de estilo" tipo="texto/css" href="es decir.css" />
<![endif]-->

El tercer método es el método de filtro CSS. Lo siguiente está traducido de sitios web extranjeros.

Cree un nuevo estilo CSS de la siguiente manera:

#artículo {
ancho: 200px;
altura: 200 píxeles;
fondo: rojo;
}

Crea un nuevo div y usa el estilo CSS definido anteriormente:

<div id="item">algo de texto aquí</div>

Agregue el atributo lang aquí en el rendimiento del cuerpo, el chino es zh:

Ahora define otro estilo para el elemento div:

*:lang(es) #item{
fondo:verde!importante;
}

Esto se hace para sobrescribir el estilo CSS original con! Importante. Dado que el selector :lang no es compatible con IE7.0, no tendrá ningún efecto en esta oración. Por lo tanto, se logra el mismo efecto en IE6.0, pero. Desafortunadamente, Safari tampoco admite este atributo, por lo que debe agregar el siguiente estilo CSS:

#elemento:vacío {
fondo: verde! importante
}

El selector :empty es una especificación CSS3. Aunque Safari no admite esta especificación, este elemento seguirá seleccionado independientemente de si este elemento existe, ahora aparecerá verde en navegadores que no sean versiones de IE.

Para compatibilidad con IE6 y FF, puedes considerar el anterior. Importante. Personalmente, prefiero el primero, que es simple y tiene mejor compatibilidad.