Cercando di ottenere siti web CSS-based con lo stesso aspetto in tutti i browser spesso può essere difficile. Molti dei problemi invece si trovano con Internet Explorer che implementa dei comandi CSS diversamente da altri, più compatibili con i browser standard. Non tutto è perduto, però , poiché molte delle differenze tra tutti i browser sono causate dagli stessi problemi di CSS di Internet Explorer.

Lista di 6 tips & tricks

1. Elementi della pagina sono più stretti in Internet Explorer
Forse il problema più famoso tra IE e CSS è l’errata interpretazione delle regole CSS del box model da parte di Internet Explorer, che può causare che elementi della pagina siano più stretti in IE. Ogni elemento HTML è essenzialmente una scatola, la cui larghezza è pari al totale del suo margine, bordo, padding e l’area del contenuto. Immaginate la seguente regola CSS:
[code lang=”css”] div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em;
}
[/code]
Questo significa che ogni div ha 50em di larghezza totale. Tale totale si compone di una zona centrale di 30em di ampiezza, più un’imbottitura di 4em, un bordo di 1em e un margine (invisibile) di 5em su entrambi i lati (sinistro e destro).
In IE tuttavia, il bordo e padding sono inclusi nella larghezza del contenuto, piuttosto che aggiungergli. In IE quindi, la larghezza del contenuto è solo di 20em (30em meno 5em d’imbottitura e di bordo su entrambi i lati), e la larghezza totale del div è solo 40em.
Questo problema sul modello del box (o box model in inglese) di CSS avviene in IE 5.x, e può verificarsi in IE 6, a seconda di come si dichiara il valore ISO nel codice HTML. Ci sono due modi per farlo:
[code lang=”xml”] <?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
[/code]
Il primo comando è posto sulla prima riga del documento HTML e la seconda può essere posizionato ovunque all’interno del head. Al fine di convalidare le pagine XHTML è obbligatorio utilizzare uno di questi comandi. Il consorzio W3C raccomanda di utilizzare il primo giacché il secondo sarà eliminato in futuro.
Usando il primo comando tuttavia, Internet Explorer 6 renderà il box model CSS in modo non corretto, proprio come nella versione 5 browser. Per risolvere il problema del box model, è necessario inserire uno hack CSS per inviare valori di larghezza differenti a differenti browser. Lo hack CSS che si utilizzerà dipenderà da quale valore ISO sarà utilizzato, e quindi quali versioni di IE avranno il rendering del box model in modo errato.
Per sistemare solo per IE5.x, utilizzare i seguenti comandi CSS:
[code lang=”css”] div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em;
}
[/code]
Per sistemarlo in tutte le versioni di IE, usare questi comandi CSS:
[code lang=”css”] div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em;
}
html>body div {
width: 30em;
}
[/code]
2. Fuoriuscita del testo dal suo contenitore in browser diversi da IE
Internet Explorer, a differenza di altri browser, amplierà i bordi e i colori di sfondo del testo in modo da evitare le fuoriuscite del contenuto dal suo elemento contenitore. Guardate il seguente esempio:

Esempio di testo

Se state vedendo questo in Internet Explorer, il contenitore dovrebbe vedersi come ci si aspetta. In tutti gli altri browser, il testo fuoriesce dalla parte destra del contenitore. Al contenitore è stato aggiunto l’attributo class="box" che ha i seguenti comandi CSS:

[code lang=”css”] .box {
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap;
}
[/code]
I browser diversi da IE aderiscono al comando width: 40px CSS, ed è per questo che il contenitore non si espande in questi browser, come invece IE interpreta width e min-width, che espande il contenitore per adattarlo al testo (lo stesso vale anche con height e con min-height).
Per assicurare che il testo non fuoriesca dal contenitore in tutti i browser, è necessario usare, oltre alla prima, la seguente regola CSS:
[code lang=”css”] html>body .box {
width: auto;
min-width: 40px;
}
[/code]
IE ignorerà questi tipi di comandi CSS, come il comando html>body. Come tale, questo comando CSS serve solo per i browser diversi da IE. La prima regola CSS, width: auto, sovrascrive l’originale regola width. Il secondo comando, min-width: 40px assegna quindi una larghezza minima al contenitore, per cui il contenitore si espanderà sempre per adattare il testo.
Controlla il contenitore di nuovo (non si vede alcuna differenza in Internet Explorer, se si apre questa pagina in un altro browser per vedere le differenze):

Esempio di testo

Molto meglio!

3. Immagine di sfondo che scompare
IE ha un baco molto stravagante che fa sì che l’immagine di sfondo (e talvolta anche nel testo – in particolare se vi sono elementi galleggianti intorno) scompare. Questo accade spesso quando si scorre su e giù su una pagina web e di solito è possibile fare riappare lo sfondo solo facendo il refresh della pagina.
Ovviamente non si desidera che il visitatore del sito si costretto ad aggiornare o a fare il refresh di una pagina per visualizzare l’immagine di sfondo a pieno! Una soluzione a questo stravagante problema è di inserire il comando CSS position: relative come regola CSS all’interno del selettore che contiene l’immagine di sfondo:
[code lang=”css”] .foo {
background: url(filename.jpg);
position: relative;
}
[/code]
A volte questo non funziona, quindi un’altra soluzione è di assegnare una larghezza o un’altezza all’elemento con l’immagine di sfondo. Se non si vuole assegnare un’altezza o una larghezza, un’altra soluzione ancora è quella di assegnare un’altezza di 1% per Internet Explorer: perché IE interpreta height come min-height (vedi precedente punto 2). Questa regola CSS non pregiudica l’aspetto:
[code lang=”css”] .foo {
background: url(filename.jpg);
height: 1%;
}
html>body .foo {
height: auto;
}
[/code]
Il comando CSS height: 1% è annullato dal comando CSS height: auto. Internet Explorer non capisce html>body, così con l’inserimento di questo selettore come seconda regola CSS, questa sarà ignorata tutta da IE.
4. Larghezze lavora solo su IE
Ogni elemento HTML può essere un blocco o un elemento inline. Esempi di elementi di blocco sono div, h1, form e li. Esempi di elementi in linea sono span, a, label, strong e em.
Una delle caratteristiche degli elementi in linea è che non è possibile modificare la larghezza di un elemento inline. La seguente regola CSS, in teoria, non dovrebbe lavorare:
[code lang=”css”] span {
width: 100px;
}
[/code]
Questa regola CSS non funziona, tranne che in Internet Explorer, dove ogni span ora avrà una larghezza di 100px. In ogni altro browser invece, la larghezza dello span sarà semplicemente l’ampiezza del numero di caratteri contenuti nell’elemento. La soluzione? Far diventare lo span come elemento di blocco:
[code lang=”css”] span {
width: 100px;
display: block;
}
[/code]
Diventando lo come in un elemento di blocco il comando width lavorerà su tutti i browser, ma questa regola inizierà l’intervallo su una nuova linea. Per evitare questo, è possibile assegnare la regola float: left allo span.
[code lang=”css”] span {
width: 100px;
display: block;
float: left;
}
[/code]
5. Versione senza stili in pagina web che appare in IE
Quando caricate con Internet Explorer un vostro sito web, perché a volte appare una versione senza stile nella pagina per un secondo o due, prima che carichi la versione con lo stile? Se è così , il vostro sito può essere affetto da ciò che è conosciuto come il flash dei contenuti senza stile (o FOUC).
Se si utilizza la direttiva @ import ad esempio
[code lang=”html”] <style type="text/css">@import "styles.css";</style>
[/code]
Per richiamare il file CSS allora questo fenomeno può accadere sul tuo sito web in IE. È strano, non c’è spiegazione logica per questo, ma questo problema deve ovviamente essere risolto.
La soluzione semplice a questo problema illogico è una soluzione altrettanto illogica – inserire o un link o un elemento script nell’intestazione:
[code lang=”html”] <script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css" media="print" />
[/code]
Non importa quale s’inserisce (o anche se s’inseriscono entrambi). Se si fornisce un foglio di stile per la stampa, utilizzando l’elemento link di riferimento (come indicato nel precedente esempio), non vedrete più il fenomeno FOUC.
6. Fissare larghezza di una pagina web al centro della finestra
Hai un sito web a larghezza fissa e non puoi farlo allineare centralmente nella finestra di Internet Explorer? Oppure vuoi allinearla centralmente in IE e non in qualsiasi altro browser? Non abbiate paura, non è colpa vostra! Purtroppo, il modo corretto di allineamento centrale dei contenuti attraverso i CSS in realtà non lavora in IE:
[code lang=”css”] #container {
width: 770px;
margin: 0 auto;
}
[/code]
Il secondo comando, margin: 0 auto, dà sostanzialmente al nostro elemento contenente un margine automatico a sinistra e a destra, in modo da disporre l’elemento che lo contiene al centro della finestra del browser.
IE però avrà bisogno di comandi leggermente diversi per fare questo lavoro:
[code lang=”css”] body {
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
[/code]
Questo quindi allineerà centralmente il contenitore anche in IE. Per impedire che il testo contenuto si disponga anche centralmente, inseriamo text-align: left nel contenitore div.