HTML/CSS: Un elemento, alta 1 pixel, 100% di larghezza, 0 immagini, singolo colore, tutti i browser

Question

Sto cercando un modo per fare qualcosa che a mio parere dovrebbe essere super semplice, ma non potevo capisco ...

Voglio un elemento grafico sulla mia pagina web che è esattamente Alto 1 pixel, 100% di larghezza e ha un certo colore, diciamo rosso. Dovrebbe apparire esattamente lo stesso in tutti i browser e preferibilmente non dovrebbe rompere troppo la semantica.

Non voglio usare alcuna immagine per questo e non voglio usare più di un elemento HTML. Ovviamente, non userò JavaScript.

Ho provato il vecchio classico che probabilmente molti di voi sanno:

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

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

Il problema con la soluzione di cui sopra è che IE6 renderà questo più in alto due o tre pixel, per adattare i contenuti non-esistenti il div.

Qualche idea?

Answer 1

aggiunta un overflow: nascosto; lo stile dovrebbe risolverlo anche

Answer 2

solo fare

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

sono andato attraverso la stessa cosa quando ero di nuovo da CSS.

Answer 3

Non ho IE6 per testare questo, ma mi ricordo che doveva fare qualcosa con l'altezza della linea. Hai provato questo?

line-height: 1px; 

Answer 4

non ho IE6 a portata di mano per testare, ma un tag HR effettivi possono lavorare nei browser moderni. Mi ci sono voluti un paio di tentativi per rendersi conto di impostare il colore di sfondo non è il colore del bordo:

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

(regolare secondo)