T&T - tag: browser
Css, problemi di compatibilita' tra Firefox e IE
Tag: css xhtml browser internet explorer safari chrome opera firefox
Tra i browser più utilizzati dagli utenti della rete vi sono Internet exlorer e Mozilla Firefox, che guarda caso sono quelli che interpretano in maniera più diversa il codice che scriviamo. Firefox è più "permissivo", se così si può dire, di fronte agli errori di piccola gravità presenti nel codice, IE, al contrario, arriva a sconvolgere l'intera paginazione per errori che possono essere considerati si secondaria importanza.
Gli altri browser, quali safari, opera ed in neo arrivato chrome, interpretano il codice in maniera simile a Firefox, a meno di qualche caso specifico. Il problema si pone quindi con IE, e nello specifico, sia per IE 6 che per IE 7 il quale, nonostante i numerosi miglioramenti apportati, presenta ancora numerose imperfezioni rispetto alla concorrenza.
Per risolvere il problema IE, a mio avviso, ci sono due differenti strade:
- scrivere file css differenti
- utilizzare una specifica sintassi per indicare istruzioni dedicate a IE6 o a IE7
La prima possibilità è a mio avviso preferibile nel caso in cui il contenuto del foglio di stile non ecceda, semplicemente per il fatto che tutto il codice che si scrive va moltiplicato per tutti i browser che si vogliono contemplare, con evidente ridondanza sia in creazione, che in modifica/controllo.
Il secondo metodo invece, prevede di specificare ogni singola istruzione, utilizzando i caratteri speciali: # e _ i quali, utilizzati immediatamente prima l'istruzione indicano rispettivamente che la stessa si riferisce a IE7 oppure a IE6.
Esempio:
margin-bottom:10px; /* stile per qualsiasi browser */
_margin-bottom:5px; /* stile per Internet Explorer 6.x */
#margin-bottom:2px; /* stile per Internet Explorer 7.x */
Ecco che quindi ciascuna istruzione problematica e possibile correggerla nello specifico con il metodo mostrato.
Va comunque ricordato che, per le differenze di interpretazione del foglio di stile da parte dei Opera, Safari e simili, è necessario ricorrere a soluzioni più sottili e dettagliate, che soltanto una buona pratica con i fogli di stile può garantire!