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
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em;
}
[/code]
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:
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
[/code]
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:
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em;
}
[/code]
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em;
}
html>body div {
width: 30em;
}
[/code]
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:
width: 40px;
border: 2px solid #781351;
padding: 3px;
background: #d7b9c9;
white-space: nowrap;
}
[/code]
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:
width: auto;
min-width: 40px;
}
[/code]
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!
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:background: url(filename.jpg);
position: relative;
}
[/code]
height
come min-height
(vedi precedente punto 2). Questa regola CSS non pregiudica l’aspetto:background: url(filename.jpg);
height: 1%;
}
html>body .foo {
height: auto;
}
[/code]
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.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:
width: 100px;
}
[/code]
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:width: 100px;
display: block;
}
[/code]
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
.width: 100px;
display: block;
float: left;
}
[/code]
Se si utilizza la direttiva @ import ad esempio
[/code]
La soluzione semplice a questo problema illogico è una soluzione altrettanto illogica – inserire o un link o un elemento script nell’intestazione:
<link rel="stylesheet" href="styles.css" media="print" />
[/code]
width: 770px;
margin: 0 auto;
}
[/code]
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:
text-align: center;
}
#container {
width: 770px;
margin: 0 auto;
text-align: left;
}
[/code]
text-align: left
nel contenitore div
.
Ancora nessun commento