基于webkit的浏览器的CSS规则

Question

我有下一个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中执行第一个,在其他浏览器中执行第二个.

我试过这个,但第二个代码似乎总是在执行:

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

我该如何解决这个问题？

Answer 1

问题是您使用非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-ratio所有使用webkit的设备上的火灾,但它可能确实如此.

作为参考,层叠样式表从上到下阅读.关键词是Cascading.如果在相同的CSS规则之前给出一个CSS规则,则后者将优先.在您的示例中,您专门为webkit浏览器设置样式,但随后使用常规样式规则覆盖它.撤消订单意味着此处的webkit样式将覆盖一般样式(不影响非webkit浏览器).