Cuando diseñamos una página web, ésta debe verse exactamente igual en todos los navegadores. Lograr la exactitud visual independientemente del navegador que usemos genera inmensos dolores de cabeza al pobre desdichado que le ha tocado maquetar. Estas incompatibilidades visuales suelen ser debidas por una mala codificación del xhtml o del css, o porque el navegador no a hace uso de los estándares web, como pasa con IE6.

Pero no todo es culpa de IE6 ni de que nuestro código xhtml no sea válido. Hay otras ocasiones en las que una misma etiqueta html tiene diferentes valores para distintos navegadores, no es habitual pero puede pasar. Por ejemplo, la etiqueta < img> si se encuentra dentro de etiqueta < a> en Internet Explorer se genera con un borde alrededor de la imagen y en Firefox se muestra sin ese borde (como debería ser).

Para evitar este tipo de diferencias la mejor solución es tener una hoja de estilos (CSS) base e independiente del diseño que vayamos a definir. Esta hoja resetearía los estilos para las etiquetas más habituales a unos valores por defecto. Así evitamos parte de esos errores de compatibilidad entre navegadores. aa

 
html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}
 
 

Código extraído de Meyerweb.com

Al maquetar una web es muy frecuente usar imágenes para mostrar encabezados que deben tener un diseño definido y que con simple texto no se podrían presentar. Queda muy estético, es cierto, pero si usamos etiquetas como h1, éstas pierden todo el significado ya que no aportarían información a los robots de búsqueda.

Si queremos que los buscadores vean un encabezado h1 con texto y nuestros usuarios un h1 con una imagen bien diseñada, la solución la encontramos usando CSS. Basta con definir el texto dentro de una etiqueta y mediante estilos reemplazamos este texto por una imagen definida en nuestra hoja de estilos.

En realidad no es un reemplazo, sólo estamos mandando el texto hasta la derecha y colocándolo al fondo de las capas de nuestro documento, por lo cual un usuario con CSS activado no vería el texto y si la imagen.

El código HTML quedaría así:

 
<h1><span>Tu texto</span></h1>
 

Y el código CSS necesario:

 
h1{ 
    background: url(imagen.png) no-repeat; 
} 
h1 span { 
    position:absolute; 
    text-indent: -10000px; 
}