Hoja de estilos base

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: "";
}