Jonathan Echeverría
Lo que tengo en la cabeza

Programación CSS diferentes para Firefox e Internet Explorer

Cuando hacemos páginas web, es totalmente recomendado, incluso imprescindible probar nuestras páginas en desarrollo en varios navegadores. Esto es recomendado porque a pesar de que HTML y CSS son un estándar reconocido desde hace mucho tiempo, cada navegador interpreta este estándar como le parece.

Así es muy habitual que cuando trabajamos con divs y sus atributos position:relative junto con el top,left, right los resultados que obtenemos no son los mismos para Firefox que para Internet Explorer 7, que para Internet Explorer 6 (aunque parezca mentira, casi 2 años después de la publicación de IE7 aun hay usuarios del IE6).

Entonces…¿cómo podemos indicar en un CSS que estilo tiene que aplicar para Firefox y cuál para Internet Explorer?

Para esto hay muchas soluciones programáticamente hablando. Por ejemplo se puede emplear un script para identificar el navegador y dependiendo del navegador cargar un CSS u otro. Esta es una solución válida pero que es más pesada de desarrollar puesto que tienes que implementar dos archivos CSS.

La sólución que yo empleo habitualmente tanto en casa como en el trabajo, es muy sencilla, y nos permite tener todo en un mismo archivo CSS, e incluso con un mismo id del div. Es tan sencillo como en el siguiente ejemplo:

#mi_div_de_ejemplo{
    ...
    position: relative;
    /*Linea que leerá tanto Firefox como Internet Explorer*/
    top: 114px; 
    /*Linea que sólo leerá Internet Explorer y 
                       sustituirá al top anterior*/
    //top: 145px;  
}

De esta sencilla forma podemos conseguir que una línea de nuestro CSS sólo sea interpretada por IE. La explicación es que Firefox reconoce los carácteres “//” como una línea comentada y por eso se la salta, mientras que el Explorer no reconoce dichos carácteres y aplica el estilo.

Esta “técnica” nos permite ajustar nuestras páginas para todos los navegadores y que todas nuestras páginas web se vean igual en Firefox y en Internet Explorer.

Artículos relacionados:

• 29 de junio, 2010 -- Find + exec, para reemplazar cadenas en ficheros

Tags: compatibilidad css, css diferente explorer firefox, css firefox, css firefox explorer, css internet explorer, css para cada navegador, position relative css firefox explorer, programacion css firefox y explorer, script cambio css dependiendo navegador

7 comentarios en Programación CSS diferentes para Firefox e Internet Explorer

1. 

   Hola, te pasaste!!! Justo estaba luchando con este problema y tenía la opción de identificar el browser con javascript, pero esta opción es mucho más simple.
   Muchas Gracias!!!!
Carla De Lourerio escribió el 18 octubre, 2008
2. 

   Así es, para determinados casos en los que prácticamente firefox e IE muestran todo igual, y únicamente hay que ajustar alguna altura, o posición, este truco viene perfecto. Si hay que cambiar mucho los css, entonces quizá lo más recomendable es emplear la opción del script que detecta el navegador y carga un css u otro.
   Un saludo y gracias por tu comentario!!
Jonathan Echeverria escribió el 19 octubre, 2008
3. 

   yo tengo ese mismo problemita pero tengo muchos css que cambiar so si pudieran ayudarme y decirme donde puedo encotrar el script de java que me identifique el navegador y de ahi salga un estilo diferente se los agradeceria please
cuba177 escribió el 5 junio, 2009
4. 

   Hola,

   Precisamente con este artículo presentaba una solución alternativa a tener que diseñar varios css, y luego cargar uno u otro en función del navegador que utilice el usuario. Y más en la actualidad que tenemos tantos navegadores conviviendo: internet explorer 6, internet explorer 7, internet explorer 8, firefox, chrome, opera… Cada vez es más inviable construir un css para cada navegador, puesto que se multiplica el trabajo.

   Un saludo,
Jonathan Echeverria escribió el 8 junio, 2009
5. 

   Gracias Amigo
   Hace tiempo estaba buscando esta solución y hoy por fin la encuentro…
   Un abrazo…!!!
Ephren escribió el 4 abril, 2011
6. 

   Gracias por compartir es de mucha ayuda, y nos quitas muchos doloresd e cabeza.
Pedro Rueda Villegas escribió el 17 mayo, 2011
7. 

   Buenas noches amigo, mi blog presenta ese problema que en Google Chrome se ve tal y como quiero que se vea ya que en ese explorador lo diseñe en cambio e otros explore se ve totalmente distinto, me podria ayudar a solucionarlo ? Gracias!
Roinel Cequea escribió el 1 septiembre, 2011

Deja un comentario