Trucos CSS Firefox, Internet Explorer, Chrome, Opera…

Hoy estando en el trabajo viendo mi “nueva página personal” me he dado cuenta que desde Mozilla Firefox versión 20.0.1 el botón de compartir de AddThis no se veía centrado en el elemento div con la propiedad position: fixed; que tengo colocado a la izquierda de la web, por lo que tras varias pruebas tocando el CSS he necesitado usar un pequeño truco o hack para diseñadores.

Para quien sabe del tema, sabe que diseñar una página web no es fácil debido a que lo que se ve bien por ejemplo en Google Chrome, se ve mal en Internet Explorer o en los diferentes navegadores como Opera, Safari o Mozilla Firefox.

Por lo que como iba diciendo he tenido que agregar un pequeño código en el .css para que el CSS solo afente a navegadores Mozilla Firefox.

Los ejemplo después del salto.

Partiré de este estilo:

Voy a empezar con los hacks para Internet Explorer:

Internet Explorer 6

Internet Explorer 6 no interpreta la propiedad CSS “!important” por lo que se peude jugar con ello, pero vamos yo no lo recomiendo:

Internet Explorer 6 (!important)

Internet Explorer 7 y anteriores:

Internet Explorer 8:

Realizando varias pruebas me he dado cuenta que a veces este hack a parte de ser para Intenet Explorer8, también afecta a Internet Explorer 7, por lo que tendremos que poner un hack que solo afente a IE7 y luego después el hack de IE8.

Internet Explorer 8 y 9:

Internet Explorer 9 y 10:

Todas las versiones de Internet Explorer:

Internet Explorer 7 y demás navegadores modernos (incluido IE8):

Todos los navegadores modernos (incluido IE8):

Opera 9.27 y anteriores:

Opera 9.5 y superiores:

Safari:

Safari 3+, Opera 9+, Firefox 3.5+ y Chrome 1+:

Safari 3+ y Chrome 1+:

Todas las versiones de Firefox:

Cualquier Gecko (incluido Firefox):

Firefox 1.5+:

Firefox 2 y versiones anteriores:

Firefox 3 (y quizás más nuevos):

Después de escribir esto decir que no he probado todos, y que ha sido una recopilación que tenía realizada desde hace varios años en mi PC.

En la actualidad hay versiones más modernas de los navegadores nombrados por lo que si tenéis algún otro hack que no este aquí no dudéis en comentar.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *