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.

7 Comments

  1. Carla De Lourerio 18 de Octubre, 2008
  2. Jonathan Echeverria 19 de Octubre, 2008
  3. cuba177 5 de Junio, 2009
    • Jonathan Echeverria 8 de Junio, 2009
  4. Ephren 4 de Abril, 2011
  5. Pedro Rueda Villegas 17 de Mayo, 2011
  6. Roinel Cequea 1 de Septiembre, 2011

Leave a Reply