ilDavid.com

In questo articolo di CSS-Tricks vengono spiegati tutti i trucchi e le varie compatibilità della proprietà css float.
Fondamentale per poter essere sicuri di un risultato cross-browser.

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:

<!--[if lte IE 7]>
<style type="text/css">
hr {
  background-image: url('four-times-larger-image.gif');
  height: 60px;zoom: 25%;
}
  </style>
<![endif]-->