Les règles CSS pour les navigateurs basés sur webkit

J'ai le code CSS suivant:

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

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

Maintenant, je veux exécuter le premier juste dans Google Chrome et Safari, et la seconde dans les autres navigateurs.

J'ai essayé ceci, mais la deuxième code semble être en cours d'exécution toujours:

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

Comment puis-je régler ce problème?

OriginalL'auteur Draco | 2013-03-21

  1. 20

    Le problème, c'est que vous êtes primordial votre webkit style avec la non-webkit style.
    L'inversion de l'ordre devrait résoudre ce problème:

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

    Vous pouvez également vouloir vérifier que votre -webkit-min-device-pixel-ratio feux sur tous webkit-à l'aide de dispositifs, mais il est sans doute.

    Pour référence, les Feuilles de Style en Cascade sont lues de haut en bas. Le mot-clé est en Cascade. Si une règle CSS est donné avant à l'identique de la règle CSS, ce dernier aura préséance. Dans votre exemple, vous avez été style spécifiquement pour les navigateurs webkit mais alors primordial avec la général des règles de style. L'inversion de l'ordre signifie que le webkit style ici remplaceront le grand style (sans affecter les non-navigateurs webkit).

    Grâce à vous! Très utile 🙂

    OriginalL'auteur James Donnelly