La gestione dell'elemento hr è sempre stata una fonte di preoccupazione per i designer.
Infatti questo elemento presenta dei problemi di compatibilità cross-browser dovuti alla differente interpretazione che ogni browser da all'elemento.
I problemi principali sono soprattutto quelli relativi alla gestione del bordo dell'elemento e d alla sua formattazione verticale. Riassumendo, si incontrano le seguenti difficoltà:
- I margini verticali vengono calcolati in modo differente.
- Specificare un bordo per l'elemento produce risultati diversi.
- Attribuire un'immagine di sfondo porta a risultati inattesi.
Alcuni anni fa Marek Prokop ha pubblicato un
articolo
nel quale illustrava i vari metodi per bypassare il problema. Il metodo certamente più
efficace consiste nell'eliminare l'elemento hr e sostituirlo con un elemento
div a cui si andranno ad attribuire gli stili desiderati. Il codice (X)HTML
è simile al seguente:
<div class="hr"><hr/></div>
Il codice CSS sarà:
hr {
display: none;
}
div.hr {
height: 1px;
margin: 0 auto;
border-top: 1px solid #000;
width: 70%;
}
Il risultato finale sarà uniforme in tutti i browser.
Se avessimo voluto attribuire un'immagine di sfondo avremmo semplicemente dovuto specificarla per l'elemento
con classe .hr, ovviamente impostando per esso delle dimensioni adeguate a quelle dell'immagine.