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浏览器）。

基于webkit的浏览器的CSS规则

1 个答案: