regole CSS per i browser WebKit basato

Question

Ho il codice seguente CSS:

#mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
} 

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

Ora voglio eseguire il primo solo in Google Chrome e Safari, e il secondo in altri browser.

Ho provato a farlo, ma secondo codice sembra essere l'esecuzione di sempre:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
    } 
} 

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

Come posso risolvere questo?

Answer 1

Il problema è che si sta sovrascrivendo lo stile del Webkit con lo stile non Webkit. invertendo l'ordine dovrebbe risolvere questo problema:

#mgheader .letters { 
    display: inline-block; 
    margin-left: 10px; 
    position: absolute; 
} 

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #mgheader .letters { 
    display: inline-block; 
    margin-left: 55px; 
    margin-top: -45px; 
    position: absolute; 
    } 
} 

Si consiglia inoltre di controllare che i vostri -webkit-min-device-pixel-ratio incendi su tutti i dispositivi su WebKit usando, ma probabilmente fa.

Per riferimento, i fogli di stile CSS vengono letti dall'alto verso il basso. La parola chiave è Cascading. Se viene data una regola CSS prima di una regola CSS identica, quest'ultima avrà la precedenza. Nel tuo esempio stavi indirizzando in modo specifico ai browser Webkit, ma poi lo sostituisci con le regole generali di stile. Invertire l'ordine significa che lo stile del webkit qui sostituirà lo stile generale (senza influenzare i browser non Webkit).