基于Webkit的浏览器的CSS规则 [英] CSS rules for webkit based browsers

问题描述

我有下一个CSS代码:

I have the next 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;
}

现在，我想仅在Google Chrome和Safari中执行第一个，而在其他浏览器中执行第二个.

我尝试了这个，但是第二条代码似乎总是在执行:

I tried this, but second code seems to be executing always:

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

我该如何解决?

推荐答案

问题是您正在用非Webkit样式覆盖Webkit样式. 颠倒顺序应该可以解决此问题:

The problem is that you're overriding your webkit styling with the non-webkit styling. Reversing the order should fix this:

#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-ratio是否在所有使用Webkit的设备上启动，但是可能会启动.

You may also want to check that your -webkit-min-device-pixel-ratio fires on all webkit-using devices, but it probably does.

作为参考，从上到下阅读级联样式表.关键字是层叠.如果在相同的CSS规则之前 给出了一个CSS规则，则以后一个规则为准.在您的示例中，您是专门针对Webkit浏览器进行样式设置，但随后使用常规样式设置规则将其覆盖.颠倒顺序意味着此处的Webkit样式将覆盖常规样式(不影响非Webkit浏览器).

For reference, Cascading Style Sheets are read from top to bottom. The key word is Cascading. If one CSS rule is given before an identical CSS rule, the latter one will take precedence. In your example you were styling specifically to webkit browsers but then overriding it with the general styling rules. Reversing the order means that the webkit styling here will override the general styling (without affecting non-webkit browsers).

这篇关于基于Webkit的浏览器的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！