Come sviluppatore Web, può essere frustrante per rendersi conto che il progetto viene visualizzato in modo diverso in ogni browser. Questo è particolarmente frustrante se si hanno codificato il codice HTML e CSS con gli standard Web in mente, e Internet Explorer Visualizza i margini in modo diverso rispetto a Firefox. Mentre alcune versioni di Internet Explorer visualizzano questo comportamento, lavorare intorno ad esso per produrre margini identici in più browser.

CSS Box Model

Il modello di riquadro CSS si riferisce a come rettangolare forme e loro proprietà, inclusi i bordi, imbottitura e margini, agirà. Quando un browser come Firefox Visualizza questo modello correttamente la larghezza specificata di un elemento, ad esempio un livello di div, non includerà imbottitura, la larghezza del bordo o margini. Margine rimarrà lo spazio tra il bordo esterno dell'elemento e gli oggetti circostanti. Tuttavia, Internet Explorer 6 Visualizza il modello di casella in modo non corretto perché aggiunge i bordi, margini e spaziatura interna alla larghezza. La larghezza effettiva del contenuto si riduce così, perché la casella deve ospitare i margini, troppo.

Significato

A causa delle differenze nel modo in cui i due browser trattano i margini, creare una versione separata del tuo foglio di stile da utilizzare per Internet Explorer 6 e versioni precedenti del browser. Utilizzare browser di rilevamento per caricare questo foglio di stile, invece di file CSS predefinito, al fine di utilizzare gli stili che funzionano con il modello di box differenti di Internet Explorer 6. Questo significa che si richiederà l'accesso al browser così da poter garantire che tutti i tuoi visitatori abbiano la stessa esperienza, non importa quale browser che utilizzano.

Attuazione

Se si desidera utilizzare un secondo foglio di stile, è necessario crearlo solo per gli elementi che Internet Explorer visualizza in modo non corretto. Non è necessario ripetere tutti gli stili. Inserire il codice seguente nel documento HTML per la tua pagina Web, dopo il riferimento al foglio di stile predefinito:

<!-[se IE 6] >
< link href="ie.css" rel = "stylesheet" type = "text/css" >
<! [endif]-->

Creare il file "IE" nel codice editor, quindi inserire il codice che si riferisce al modello errato casella nel tuo foglio di stile secondo. Tutti gli altri browser, tra cui Firefox, visualizzerà il tuo CSS originale.

Considerazioni

Dal rilascio di Internet Explorer 7, il browser è visualizzato correttamente il modello box. Così, non è necessario ricontrollare i vostri disegni in Internet Explorer 7, 8 o 9. Tuttavia, molte persone usano ancora Internet Explorer 6, il browser predefinito di Windows XP. Mentre le versioni più recenti si comportano correttamente, dovresti comunque considerare utilizzando i commenti condizionali per includere un foglio di stile specifico IE così gli utenti che non hanno aggiornato possono sperimentare il tuo sito Web come previsto.