Flottare elementi con width in percentuale

Su IE7 e precedenti se flotti più div ed ognuno occupa il 25% della larghezza totale, l’ultimo cade perché il browser non riesce a calcolare in maniera ottimale valori espressi in percentuale, soprattutto quando entrano in gioco i sub-pixel. IE, arrotondando all’intero più vicino, impedisce all’ultimo box di affiancarsi ai precedenti, perchè la somma delle width di ogni elemento è maggiore della width del contenitore padre. Abbiamo alcune soluzioni:

<div id="parent">
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
    <div class="element"></div>
</div>
/*Soluzione 1*/
.element{
    float:left;
    width:25%;
    *clear:right; /*IE7 Below*/
}

/*Soluzione 2*/
.element{
    float:left;
    width:25%;
    *width:24.9%; /*IE7 Below*/
}
Vai all'archivio
  • Alessandro Ursomando

    Cosa esprime quell’asterisco prima dell’ultima dichiarazione?

    • Stefano Vollono

      Ciao Alessandro, è un Hack css interpretato solo da IE7 e versioni inferiori e quindi solo per quei browser varrà l’ultima regola.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github