Como diseñador web, muchas veces nos encontraremos que teniendo un mismo archivo de estilo css, hay cosas que se ven distinto entre los diferentes navegadores. Márgenes mas grandes o pequeños, fuentes de letra, colores… Hay una forma de minimizar el impacto que los navegadores, con sus css por defecto, puedan hacer sobre nuestra página. Para ello usaremos los reset.css. Es un css adicional que habrá que incorporar a la página antes que los demás estilos.

Hay diferentes reset.css, pero los dos mas importantes son:

  • Yahoo! UI Library: Reset CSS de Yahoo. No comentaré nada al respecto, simplemente lo he nombrado porque fué el primero en aparecer.
  • Eric Meyer: Poco después de aparecer la versión de Yahoo, Eric Meyer (gurú del CSS), creó su propia versión:
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Lo único que tenemos que hacer es crear un archivo CSS y importarlo en nuestro html:

<head>
    <link rel="stylesheet" type="text/css" href="reset.css" />
</head>

Con esto conseguiremos tener nuestro diseño con parametros iguales (prácticamente) en todos los navegadores y nos ahorrará bastantes quebraderos de cabeza.