Una de las tareas más difíciles, desgastantes y tediosas para un diseñador web, es el hacer compatible su sitio web para diferentes navegadores. Todo marcha bien cuando probamos nuestro sitio, o el diseño de nuestro nuevo theme en Firefox u Opera, pero cuando los probamos con Internet Explorer 6 y algunas veces con Safari, nuestro sitio se deforma totalmente.

Si bien existe un compendio demasiado amplio con los “Errores más comunes” con sus respectivas soluciones, no siempre se tiene a la mano algunos tips que son básicos a la hora de hacer compatible nuestro sitio con diferentes navegadores.

Antonyshort ha realizado un resumen de algunos tips básicos para evitar algunos problemas a la hora de diseñar un sitio y evitar el mal funcionamiento entre diferentes navegadores:

1. Siempre utilizar tipos de documento estricto (strict doctype) que cumplan con los estándares HTML/CSS

2. Siempre utilizar un “reset” al principio de tu css

3. Usar -moz-opacity: 0.99; sobre elementos de texto para limpiar y renderizar en Firefox, y text-shadow: #000 0 0 0 en Safari.

4. Nunca redimensionar imágenes en CSS o HTML

5. Comprueba el procesamiento de las fuentes en cada navegador. No utilices Lucida

6. Tamaño de texto como % en body, y em a lo largo de la hoja de estilos.

7. Todos los divs que se encuentren flotando, deberán incluir: display: inline; y overflow: hidden;

8. Los contenedores deberán tener: overflow: auto; y un trigger hasLayout via width o height.

9. No utilizar selectores de fantasía de CSS3

10. No utilizar PNG’s transparentes a menos que se haya cargado el alpha.

El desarrollo de cada uno de los anteriores puntos lo pueden encontrar en: How to get Cross Browser Compatibility Every Time.

Via: WebAppers