Qual’è il primo dei problemi per un web designer alle prese con lo sviluppo di un template grafico?
Beh, per noi è sicuramente l’incopatibilità di alcune proprietà degli stili quando andiamo a visualizzarle con vari browser!

Oggi voglio aiutarvi…
Vediamo, infatti, come modificare alcune proprietà delle nostre classi ed ottimizzarle per i 3 browser più noti e utilizzati del pianeta: “Chrome”, “Firefox” ed “Explorer”.

• Partiamo con l’interfacciare “Google Chrome” con “Mozilla Firefox”: qui è molto semplice, basta inserire nel foglio stile la seguente stringa, e al suo interno le classi e le proprietà da modificare:

/* Valore standard visualizzato da Chrome */
#categoryBackNextButtons {
   position: absolute;
   top: 0;
   left: 0;
   width: 490px;
}

/* Valore ottimizzato per Firefox */
@-moz-document url-prefix() {
   #categoryBackNextButtons {
      left: 100px;
      width: 486px;
   }
}

• …e anche se non ho un foglio stile, potrò comunque inserire il codice dentro il tag ‘head’:

• Ora interfacciamo “Google Chrome” con “Microsoft Internet Explorer” inserendo il seguente codice dentro il nostro tag ‘head’:

Buona ottimizzazione a tutti!! :)

Fonte originale: stackoverflow.com