Uno dei grossi problemi che un webdesigner si trova ad affrontare quando ha a che fare con righe orizzontali <hr> e i browser Microsoft, è il bordo che Internet Explorer decide di mettere quando si usa una immagine di sfondo a fare da separazione tra una sezione e un’altra.

In tanti hanno proposto delle soluzioni, e la più seguita credo sia quella di Marek Prokop, tradotta in italiano da risorse.net. La soluzione è certamente la più corretta a livello semantico e di standard, rimane però il problema che non sempre è possibile usare un <div> contenitore (per esempio in un CMS).

Jaroslav Polakovič ha però trovato una soluzione a mio avviso più interessante, ovvero utilizzare un attributo css proprietario di IE: lo zoom.

Presente fin da IE 5 la proprietà  zoom permette appunto di ingrandire (o diminuire) un oggetto in percentuale. In questo modo, rimpicciolendo la dimensione del <hr> a un quarto della sua dimensione, i bordi “spariscono”. Per fare questo è però necessario un commento condizionale per IE e una immagine di sfondo 4 volte più grande di quella usata per i browser standard compliant.

Il codice:
[html]<!–[if lte IE 7]>
hr {
background-image: url(‘four-times-larger-image.gif’);
height: 60px;
zoom: 25%;
}
<! [endif] –>[/html]

Tasks & tools