HTML/CSS: un elemento, 1 píxel de alto, 100% de ancho, 0 imágenes, un solo color, todos los navegadores

Question

Estoy buscando una manera de hacer algo que en mi opinión debería ser ser super simple, pero no pude 't resolverlo ...

Quiero un elemento gráfico en mi página web que es exactamente 1 píxel de alto, 100% de ancho y tiene un cierto color, digamos rojo. Debería verse exactamente igual en todos los navegadores y, preferiblemente, no debería romper demasiado la semántica.

No quiero utilizar ninguna imagen para esto y no quiero usar más de un elemento HTML. Por supuesto, no usaré JavaScript.

He probado el viejo clásico que probablemente muchos de ustedes saben:

<div class="hr"></div> 

<style ...> 
.hr { 
    height: 1px; 
    background: red; 
    width: 100%; 
    font-size: 1px; /* IE 6 */ 
} 
</style> 

El problema con la solución anterior es que IE6 hacer esto como dos o tres píxeles de altura, para adaptarse a los contenidos no existentes de el div.

¿Alguna idea?

Answer 1

agregar un desbordamiento: oculto; el estilo también debería arreglarlo.

Answer 2

Eso sí,

.hr { 
    height: 0px; 
    margin: 0px; 
    border-bottom: 1px solid #FF0000; 
    font-size: 1px; 
} 

pasé por lo mismo cuando yo era nuevo en CSS.

Answer 3

No tengo IE6 para probar esto, pero recuerdo que tenía que hacer algo con la altura de la línea. ¿Has probado esto?

line-height: 1px; 

Answer 4

no tengo IE6 útil para poner a prueba, pero una etiqueta real de recursos humanos pueden trabajar en los navegadores modernos. Me tomó un par de intentos para darse cuenta se establece el color de fondo no el color del borde:

hr { width:75%; height:1px; background-color:#ebebeb; border:none; margin:1.5em auto; } 

(ajustar para que se adapte)