¿Cómo obtener compatibilidad entre diferentes Navegadores Web?

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