Question

我要使用一种样式表来实现某种跨平台规则。我将向您展示一个非常简单的示例，以准确解释我想要的内容。

我有两个这样的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;
  }
}

然后在IE的HTML中：

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

跨浏览器CSS规则

2 个答案: