Chi lavora con i css si trova spesso a dover affrontare problemi di cross browser. Con un po’ di esperienza e conoscenza delle differenze tra i vari browser è possibile prevedere i problemi e evitarli con strutture html adeguate, ma non sempre è possibile, per esempio lavorando con i form e i campi di input.
I modi per risolvere i vari problemi sono principalmente due: creare dei css con le correzioni inclusi sono nei browser specifici tramite lettura dello user-agent, commenti condizionali html o simili, oppure sfruttare dei trucchetti per inserire nello stesso css proprietà interpretate solo da determinati browser. La prima soluzione è forse più pulita, ma tende a separare gli stili dello stesso elemento in punti differenti, la seconda permette di tenere nello stesso posto gli stili comuni ma tende ad inserire codice abbastanza illeggibile.
Ecco una lista che vi può tornare utile se decidete di usare la seconda strada. La lista è stata tradotta dal blog di Paul Irish, in particolare su questa pagina.
Hack basati sui selettori
| * html #id {} | IE6- |
| *:first-child+html #id {} | IE7 |
| html>body #id {} | IE7, FF, S, O |
| html>/**/body #id {} | IE8, FF, S, O (tutto tranne IE6,7) |
| html:first-child #id {} | O9.27-, S2 |
| html[xmlns*=""] body:last-child #id {} | S2, S3 |
| body:nth-of-type(1) #id {} | S3+, GC1+, O9+, FF3.5+ |
| body:first-of-type #id {} | S3+, GC1+, O9+, FF3.5+ |
| @media screen and (-webkit-min-device-pixel-ratio:0) { #id {} } | S3+, GC1+ |
| @media screen and (max-device-width: 480px) { #id {} } | iPhone / mobile webkit |
| html[xmlns*=""]:root #id {} | S2, S3.1 |
| *|html[xmlns*=""] #id {} | S2, S3.1, O9.25 |
| :root *> #id {} | Tutto tranne IE6 e IE8 |
| *+html #id {} | IE7 |
| #id, x:-moz-any-link {} | FF1+ |
| #id, x:-moz-any-link, x:default{} | FF3.0+ |
| body:not(:-moz-handler-blocked) #id {} | FF3.5+ |
Hack basati sugli attributi
| _color: blue | IE6 |
| *color: blue; oppure #color: blue | IE6, IE7 |
| color/**/: blue | Tutto tranne IE6 |
| color: blue\9; | IE6, IE7, IE8, e a volte IE9 |
| color/*\**/: blue\9; | IE7, IE8 |
| color: blue !ie; | IE6, IE7 — funziona come !important |
| color: blue\0/; | IE8, IE9 |