Hacer un website compatible con todos los navegadores es probablemente la tarea mas incomoda que debe realizar un desarrollador web. Afortunadamente podemos hablar de CSS Cross-Browser, que no es más que una serie de técnicas y consejos para desarrollar websites que se vean exactamente igual en cualquier navegador.

Unas de las principales técnicas es resetear los estilos que los navegadores definen por defecto para cada elemento HTML:

html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6,
 pre, form, p, blockquote, fieldset, input, hr {margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code,
 em, strong, th {font-size:1em; font-weight:normal; font-style:normal;}
ul, ol {list-style:none;}
fieldset, img, hr {border:none;}
caption, th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

El problema de IE.

Para suerte de muchos también existe lo que son los comentarios condicionales que están implementados en Internet Explorer, que le permite al desarrollador hacer estilos específicos para este navegador.

Esto es interpretado únicamente por IE.

<!--[if IE]>
<link href="ie.css" rel="stylesheet" />
<![endif]-->

También podemos hacer un estilo para una versión en específico de IE, en este caso para la versión 6.

<!--[if IE6]>
<link href="ie6.css" rel="stylesheet" />
<![endif]-->

Para corregir un problema de forma rápida existe una técnica que es la más usada por los desarrolladores, con la que podemos hacer estilos específicos para IE dentro de la misma hoja de estilos general:

.class {
*width:250px; /* Para IE (cualquier versión) */
_width:300px; /* Para IE6 */
.width:200px; /* Para IE7 */
}

La única pega que tiene esta técnica es que no es un estándar y por lo tanto no tiene el visto bueno de la W3C. Como dije antes es una forma rápida de corregir un problema pero lo recomendable es usar los comentarios condicionales.

También existen formas de hacer estilos que se reflejen únicamente en navegadores específicos.

Para Opera.

De esta forma podemos agregar reglas CSS que solo serán vistas por Opera, y así podremos corregir cualquier problema que se nos presente en dicho navegador sin tener que afectar a los demás.

@media all and (min-width: 0px) {
.classname {}
}

Para Safari.

Safari es un navegador que cumple con el estándar, es raro que se nos presente un problema con el. Pero esto podría suceder. Con esta técnica podemos hacer reglas CSS específicas para este navegador.

html:lang(en)>body  .classname {}

Para Google Chrome.

Aquí también hay algo para el ahora famoso navegador de Google.

body:nth-of-type(1) .classname {}