跨浏览器 CSS 规则

Question

使用一种风格sheet我想实现一种跨平台规则。我将向您展示一个非常简单的示例来准确解释我想要什么。

我有两个 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 打开它时，我希望它是蓝色的。我知道如何做到这一点（而不是每个浏览器的其他样式 sheets），但它不是这样工作的：

@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 IE 中：

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

跨浏览器 CSS 规则

Cross browser CSS rules

html

css

cross-browser