跨浏览器CSS规则[重复]

Question

这个问题在这里已有答案：

• How to detect Safari, Chrome, IE, Firefox and Opera browser? 20个答案

使用一个样式表我想实现一种跨平台规则。我将向您展示一个非常简单的例子来解释我想要的东西。

我有两个div元素：

<div class="outer">
 <div class="inner">
 </div>
</div>

还有一些简单的风格：

div.outer {
  background-color: red;
  width: 200px;
  height: 200px;
}

div.inner {
  height: 100px;
  width: 100px;
  background-color: blue;
}

现在我想覆盖其中一个的背景颜色，例如内部，另一种颜色基于我正在使用的浏览器。例如，如果我通过Chrome打开它，我希望这种颜色为绿色，当我用IE打开它时我希望它是蓝色的。我知道如何做到这一点（而不是每个浏览器的其他样式表），但它不能这样工作：

@media screen {
  .chrome .inner {
  background-color: green !important;
  }
}

你知道怎么做那些家伙吗？

Answer 1

check this

它将为您提供完整的跨浏览器识别 当你获得浏览器信息然后只定制你的风格

希望它能帮助你快乐编码！

Answer 2

有一些方法可以通过CSS和HTML实现这样的特定效果，但这只会针对一些主流浏览器。我不推荐它。这是一个例子：

/* style for all browsers (think Google & Safari/Webkit): */
p {
  background-color: blue;
}
/* overrule for Firefox: */
@-moz-document url-prefix() {
  p {
    background-color: gold;
  }
}

然后在你的HTML for IE中：

<!--[if IE]>
<style>
  p {
    background-color: purple;
  }
</style>
<![endif]-->