9

次の CSS コードがあります。

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

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

今、私は最初のものを Google Chrome と Safari だけで実行し、2 つ目は他のブラウザで実行したいと考えています。

私はこれを試しましたが、2番目のコードは常に実行されているようです:

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

どうすれば修正できますか？

4

1 に答える 1

20

問題は、Webkit スタイルを非 Webkit スタイルでオーバーライドしていることです。順序を逆にすると、これが修正されます。

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

-webkit-min-device-pixel-ratioWebkit を使用するすべてのデバイスで起動することを確認することもできますが、おそらくそうなります。

参考までに、カスケーディング スタイル シートは上から下に読みます。キーワードはカスケードです。同じ CSS ルールの前に1 つの CSS ルールが指定されている場合、後者のルールが優先されます。あなたの例では、Webkit ブラウザーに特化してスタイリングしていましたが、一般的なスタイリング ルールでオーバーライドしています。順序を逆にするということは、ここでの Webkit スタイル設定が一般的なスタイル設定をオーバーライドすることを意味します (非 Webkit ブラウザには影響しません)。

于 2013-03-21T15:49:13.553 に答える