Definir estilos para distintos navegadores en un mismo CSS

Para todos los involucrados con el diseño web, es demás conocido que los distintos navegadores disponibles no interpretan de la misma forma los estilos CSS, básicamente el problema radica con Internet Explorer que siendo el más problemático es uno de los más usados mundialmente.

Como solución a este conflicto han nacido diversas ideas y formas de solucionarlo, algunas haciendo distintos archivos CSS y usándolas de acuerdo al navegador detectado por Javascript, otras solo cambiando el estilo de una etiqueta determinada de acuerdo al navegador, etc.
Pero también se puede optar por una solución accesible en ciertos casos u que nos evita el recurrir a Javascript en demasía, simplemente se basa en anteponer ciertos caracteres para diferencias distintos valores para un mismo atributo.
La forma normal de declarar propiedades css es la siguiente:

#capa{ position:relative; width:200px; height:200px; margin-top:20px;  }

Pero si queremos definir valores distintos debemos usar los siguientes caracteres antes de cada propiedad:
El carácter “_”, esto para definir una propiedad solo para Internet Explorer 6.
El carácter “*”, esto para definir una propiedad para Internet Explorer 7.
Por ejemplo en el siguiente código se especificara un ancho de 200 pixeles para todos los navegadores, pero que a la misma vez para Internet Explorer 7 sea de 300 y para IE 6 sea de 350 pixeles.

#capa{
width:200px;
*width:300px;
_width:350px;
}

Es importante el orden ya que si declaramos primero el valor exclusivo para IE y a continuación la propiedad sin ningún carácter que anteceda aplicara el valor a todos los navegadores invalidando así lo declarado primero.

Descargar