E 'un lavoro difficile per gli sviluppatori web per rendere i loro siti completamente compatibile con la pletora di browser web disponibili, e Internet Explorer 6 non fa eccezione. Ampiamente accettato come un out-of-date e programma standard indietro, Internet Explorer 6 si terrà un piccolo sforzo in più per farlo funzionare con i CSS di un sito.

Font Dimensionamento

Internet Explorer 6 è un po 'esigente quando si tratta di ridimensionamento del testo. Non sarà ridimensionare il testo impostato in pixel, ed esagera set testo in em. Per compensare questo, è necessario innanzitutto definire la dimensione del carattere nell'elemento corpo in percentuale, e quindi utilizzare em è per il resto del foglio di stile.

Il codice di corpo sarebbe simile a questa:

Body {font-size: 75%}

Una volta definito questo, qualsiasi altro elemento può essere impostato come em è. Per esempio:

h1 {font-size: 3em}

Si noti che il 75% renderà l'equivalente di un ambiente 12px, il default essendo 16px. Utilizzando queste impostazioni, si dovrebbe ottenere risultati di carattere decenti con il tuo sito.

Double-margini su elementi mobili

Uno degli elementi di base del web design è l'utilizzo di "div" per allineare il contenuto in gruppi per una più facile gestione di elementi. In alcuni scenari, si può decidere di "galleggiare" un div, che consente di spostare un div accanto ad un altro div, a sinistra oa destra. Questo lascerà nessuno spazio tra i div, quindi un margine deve essere impostato per separarli. Il codice sarà simile a questa:

#left {float: right, width: 400px, margin-right: 10px}
#right {float: right, width: 200px}

I browser moderni come Firefox e Safari renderanno questo correttamente, mentre Internet Explorer raddoppierà il margine. Perché esattamente lo fa è sconosciuta, ma è abbastanza frustrante come designer. Per risolvere questo problema, è necessario aggiungere la chiamata "inline".

#left {float: right, width: 400px, margin-right: 10px, display: inline}
#right {float: right, width: 200px, display: inline}

Questo risolverà il problema del doppio del margine e lasciare altro browser inalterato.

Espansione Divs

Come l'esempio precedente, se si hanno due div fluttuavano fianco a fianco, è pratica comune avere una larghezza impostata per i div. Internet Explorer 6 si romperà il layout se il testo all'interno di esso outstretches larghezza dichiarato. Ecco il codice invariato.

#left {float: right, width: 400px,}
#right {float: right, width: 200px,}

Questo renderà correttamente, ma se c'è troppo all'interno del div #left, il div #right non renderà correttamente. Per risolvere, usare la chiamata "troppo pieno".

#left {float: right, width: 400px, overflow: hidden}
#right {float: right, width: 200px, overflow: hidden}

In questo modo nascondere il testo traboccante, permettendo al div #right di rimanere nella posizione corretta. Occorre tuttavia tenere presente che non non forza il testo per avvolgere, ma salverà l'allineamento.