CSS-Regeln für WebKit-basierten Browser

Question

Ich habe den nächsten CSS-Code:

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

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

Jetzt mag ich die ersten nur in Google Chrome und Safari, und die zweiten in anderen Browsern ausgeführt werden.

versuchte ich das, aber zweiter Code scheint immer Ausführung zu werden:

@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; 
} 

, wie ich das beheben kann?

Answer 1

Das Problem ist, dass Sie Ihr Webkit-Styling mit dem Nicht-Webkit-Styling überschreiben. Umkehrung der Reihenfolge sollte dieses Problem beheben:

#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; 
    } 
} 

Sie auch überprüfen möchten, dass Ihr -webkit-min-device-pixel-ratio Feuer auf allen webkit betriebener Geräte, aber es wahrscheinlich der Fall ist.

Als Referenz werden Cascading Style Sheets von oben nach unten gelesen. Das Schlüsselwort ist Cascading. Wenn eine CSS-Regel vor eine identische CSS-Regel gegeben wird, hat letztere Vorrang. In Ihrem Beispiel haben Sie speziell Webkit-Browser entworfen, aber dann mit den allgemeinen Gestaltungsregeln überschrieben. Wenn Sie die Reihenfolge umkehren, bedeutet dies, dass das Webkit-Styling das allgemeine Styling außer Kraft setzt (ohne die Webkit-Browser zu beeinflussen).