Como desaparecer los < hr />

Hace aprendi que semanticamente hablando es buena idea separar los contenidos mas grandes de un documento con Reglas Horizontales o <hr />.

Es buena idea, por que separa cada seccion conceptualmente hablando y ademas lei que es una forma muy comoda de limpiar los float por completo. Entonces me quedo con un codigo parecido a este

<div id="cabeza"> ...</div>
<hr />
<div id="contenido"> ...</div>
<hr />
<div id="pie"> ...</div>

Y los estilos
hr {
display:block;
clear:both;
margin:-1px 0;
}

En principio esto funciona para la mayoria de los exploradores, PEEROO adivinen quien no lo rendea bien? IE6, que tiene la maravillosa costumbre de hacer que nuestro trabajo sea mas interesante llenandonos de misterio y aventura en la busqueda de soluciones para que el vea bien las cosas.

Entonces es necesario “desaparecer” la regla para que explorer no la muestre por ahi colada. Para eso agregamos un par de reglas que no rompen el modelo del documento y que nos garantizan que ninguno de los exploradores lo muestre.

hr {
display:block;
clear:both;
margin:-1px 0;
position:relative;
left:-9999px;

}

Ahora el ultimo pequeñisimo detalle es que queda un pequeño margen extra que tenemos que quitar y listo ¿que es un hack mas para IE?

*+html hr { margin: 0em 0 -7px 0; /*IE 7 bugfix*/ }
* html hr { margin: 0em 0 -7px 0; /*IE 6 bugfix*/ }

Final feliz para el destino del resto del contenido que no tendra que verselas con unas reglas horizontales fantasmas que aparecen despues de muertas.
Hasta ahora funciona en
Windows: IE 6, IE 7, Netscape, Opera, FF
Mac: Safari, FF, IE 5.5, Opera, Camino, Netscape