CSS-Regeln für webkit-basierte Browser

Habe ich das nächste 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;
}

Nun will ich führen zunächst nur im Google Chrome und Safari, die zweite in anderen Browsern.

Habe ich versucht, aber der zweite code scheint zu sein, die Ausführung immer:

@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 kann ich das beheben?

InformationsquelleAutor Draco | 2013-03-21
  1. 20

    Das problem ist, dass Sie überschreiben Ihre webkit-styling mit der nicht-webkit-styling.
    Eine 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;
  }
}

    Können Sie auch prüfen wollen, dass Ihr -webkit-min-device-pixel-ratio feuert auf allen webkit-Geräte verwenden, aber es wahrscheinlich nicht.

    Referenz, Cascading Style Sheets sind von oben nach unten gelesen. Das Schlüsselwort heißt Kaskadierung. Wenn eine CSS-Regel gegeben ist vor eine identische CSS-Regel, die letztere Vorrang. In deinem Beispiel waren Sie styling speziell für webkit-Browser, aber dann überschreiben Sie es mit dem Allgemeinen styling-Regeln. Die Umkehrung der Reihenfolge bedeutet, dass die webkit-styling hier Vorrang vor dem Allgemeinen styling (ohne Auswirkungen auf nicht-webkit-Browsern).

    • Vielen Dank! Sehr hilfreich 🙂
    InformationsquelleAutor James Donnelly
Schreibe einen Kommentar