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
Ti interessa acquistare un dominio a prezzi ultraconvenienti? clicca qui
Se hai trovato utili le informazioni su questo blog,
Fai una donazione!
Clicca sul bottone qui sotto o almeno clicca sul banner pubblicitario 🙂
Commenta