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 中执行第一个，在其他浏览器中执行第二个。

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

@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-ratio在所有使用 webkit 的设备上触发，但它可能确实如此。

作为参考，层叠样式表是从上到下阅读的。关键词是级联。如果在相同的 CSS 规则之前给出一个 CSS 规则，则后一个将优先。在您的示例中，您专门为 webkit 浏览器设置样式，然后用一般样式规则覆盖它。颠倒顺序意味着这里的 webkit 样式会覆盖一般的样式（不影响非 webkit 浏览器）。

于 2013-03-21T15:49:13.553 回答