Stiamo ricercando traduttori da Italiano/Inglese a Coreano(coreano), se interessati a collaborare con noi scrivere a KEYO Web Design

Key Low Cost

IE6 Bug: doppi margini (IE6 double margin bug)

Proponiamo un promemoria per una delle tante soluzioni del bug del doppio margine, di un box flottante in Internet Explorer 6, attraverso l'utilizzo dei condizionali e della riduzione del margine e/o la trasformazione del box in elemento: inline.

Facciamo subito un esempio: disegnamo un box flottante a sinistra con un margine di 20px utilizzando il seguente codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE6 bug del doppio margine</title>

<style type="text/css">
body {
margin:0;
padding:0;
}
div {
float:left;
margin:20px;/* bug di ie6 */
width:200px;
padding:20px;
border:20px solid #ccc;
}
</style>
</head>
<body>
<div>testo prova</div>
</body>
</html>

Ora apriamo il file html, che abbiamo appena creato, con Firefox e Internet Explorer 6. Noteremo istantaneamente l'errore di posizionamento del box in IE6 come si può vedere nell'immagine seguente.

ie6 double margin bug

Quando vengono aggiunti i margini ad un box flottante, IE6 raddoppia i margini laterali e questo può creare non pochi problemi strutturali. Esistono per fortuna numerose soluzioni a questo bug, ma quella che più preferiamo per la semplicità con la quale risolve il problema è utilizzando la riduzione del margine con la selezione del browser tramite condizionali.

Soluzione - Solution

Inseriamo subito dopo lo stile del div il seguente stile commentato per essere eseguito solamente da IE6 e versioni precedenti:

</style>
<!--[if lte IE 6]> <style>
div {
margin:20px 10px;
}
</style> <![endif]-->

Oppure, una ulteriore soluzione potrebbe essere quella di trasformare il div in un blocco :inline;

</style>
<!--[if lte IE 6]> <style>
div {
display:inline;
}
</style> <![endif]-->

Magicamente il div sarà tornato nella posizione corretta anche in IE6, come potrete notare nell'immagine seguente:

ie6 double margin bug

Utilizzare il metodo della riduzione del margine piuttosto che la trasformazione dell'elemento in blocco inline, dipenderà dal contesto in cui vi trovate e dalle dipendenze del vostro box.