IE7 float left e stacking problem

Question

Domanda veloce sugli elementi flottanti rimasti con IE7. Fondamentalmente ho un codice HTML come questo

<div><a href></a></div> 
<div><a href></a></div> 
<div><a href></a></div> 
<div><a href></a></div> 

I div devono essere allineati uno accanto all'altro in linea orizzontalmente.

In questo momento i div sono flottanti a sinistra e le etichette di ancoraggio al loro interno hanno immagini di sfondo, larghezza, altezza e display: blocco.

A partire da ora funziona in tutti i browser eccetto IE6 + 7. In questi due browser tutto è impilato uno sull'altro come una pila verticalmente. C'è un modo rapido per risolvere per IE? Ho solo accesso al file CSS. Non riesco a modificare l'HTML.

Answer 1

provare a utilizzare questo:

zoom: 1; // IE hack to trigger hasLayout 
*display: inline; // IE hack to achieve inline-block behavior 
*float: none; 

sarà letto solo da IE, è un hack, ma dal momento che non è possibile accedere al codice HTML, potrebbe funzionare.

Answer 2

Assicurati di avere la larghezza del contenitore genitore che avvolge i tuoi div che stai fluttuando verso sinistra. Imposta anche la larghezza di ogni div che è fluttuante a sinistra e dovrebbe funzionare.

<div id='wrap-it'> 
    <div><a href></a></div> 
    <div><a href></a></div> 
    <div><a href></a></div> 
    <div><a href></a></div> 
</div> 
<style> 
    #wrap-it { width: 200px; } 
    #wrap-it div { float: left; width: 50px; } 
</style>