Oggi voglio pubblicare una cosa che differisce dagli argomenti degli altri post, ma dato che l’html è comunque legato in qualche modo al mio mondo, volevo scrivere due righe su come bypassare un annoso problema di compatibilità di visualizzazione tra i browser.
Immaginiamo di aver definito uno stile CSS come segue:
1 2 3 4 5 | #search_box { float: right; clear: right; width: 200px; } |
Ci accorgiamo però che mentre Firefox visualizza correttamente il div, Internet Explorer ha un posizionamento differente dello stesso. Non mi dilungo a spiegare il motivo per cui questo succede (usando un motore di ricerca troverete molta documentazione a proposito), ma voglio indicare un modo semplice per ovviare a questa anomalia. Ipotizziamo che per Firefox vada bene una larghezza di 200px mentre per explorer ne serva una da 230px, possiamo modificare la definizione CSS come segue:
1 2 3 4 5 6 | #search_box { float: right; clear: right; width: 200px !important; /*firefox*/ width: 230px; /*explorer*/ } |
In pratica mentre Firefox considera la riga dove trova !important come più importante di altre eventuali successive, Explorer ignora tale direttiva e quindi prende in considerazione l’ultima dichiarazione di width.
Un altro sistema è il seguente:
1 2 3 4 5 | #search_box { width: 200px; /* per tutti i browser */ *width: 230px; /* per tutti gli IE */ } |
1 2 3 | * html #search_box { width: 230px; /* per IE6 e IE5 */ } |
Chiaramente il sistema migliore è l’uso dei CSS condizionali, ma di questo parleremo un’altra volta
Se hai trovato utili le informazioni su questo blog,
Fai una donazione!
Clicca sul bottone qui sotto o almeno clicca sul banner pubblicitario :-)