Uno dei bachi più evidenti e fastidiosi con il float è presente su Interner Explorer fino alla versione 6. Questi browser raddoppiano il margine eventualmente definito per l’elemento sullo stesso lato nel quale il float si applica. Se avete float: left e margin-left: 10px, il browser metterà un margin-left di 20px. Se avete float: right e margin-right: 8 px, metterà un margin-right di 16px

Questo paragrafo ha un’ampiezza del 30% e un margine sinistro di 20px, che in Explorer fino alla versione 6 diventa di 40px. Nessun effetto su eventuali margini destri.

La soluzione

Siccome un raddoppio dei margini incide pesantemente anche su layout fluidi, è necessario un fix. In questo caso il fix è facile e valido. Consiste nel dichiarare per lo stesso elemento la proprietà display:inline. Per ragioni misteriose, il baco sparisce. Fate attenzione, perché l’elemento rimane block e si comporta come block: infatti predomina la proprietà float, che rende block tutti gli elementi cui è applicata.

Questo paragrafo ha un’ampiezza del 30% e un margine sinistro di 20px, che in Explorer fino alla versione 6 diventava di 40px. Usando anche display:inline, questo baco sparisce. Nessun altro browser ha problemi per l’inserimento di questa proprietà.