Question

如何根据浏览器设置CSS条件？

例如，如果浏览器是IE：

div{

    [if IE ] background-color: yellow;  
}

由于

Answer 1

我发现此页面对于选择/隔离不同的浏览器（http://browserhacks.com/）

非常有用

Answer 2

CSS是有限的，因为它不是一种编程语言（它是一种标记语言）

如果您正在使用像sass-lang，scss或更少的CSS预处理语言，那么在开发时可以解决这个问题。 SASS Lang - CSS Preprocessing.

但是，在您的情况下，条件是根据浏览器类型，（特别是IE）。

现在有一些解决方法，例如条件样式表[这里提到CSS Tricks Conditional Stylesheets]，或使用javascript进行浏览器检测（在前端，但这被认为是不好的做法）。

条件样式表的警告是适用于IE 9及以下版本（IE10的兼容性已删除）

您还应该考虑的另一件事是您是否要从后端提供条件样式表（并根据您的请求标题，您可以确定浏览器类型）。

Answer 3

条件CSS的语法：

IE-6 ONLY

* html #div { 
    height: 300px;
}


IE-7 ONLY

*+html #div { 
    height: 300px;
}


IE-8 ONLY

#div {
  height: 300px\0/;
}


IE-7 & IE-8

#div {
  height: 300px\9;
}


NON IE-7 ONLY:

#div {
   _height: 300px;
}


Hide from IE 6 and LOWER:

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

或者你可以创建两个不同的css文件，一个用于IE特定的，另一个用于其他浏览器。

如果浏览器不是IE 6：

<!--[if !IE 6]><!-->
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<!--<![endif]-->

如果浏览器大于IE 7：

<!--[if gte IE 7]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="REGULAR-STYLESHEET.css" />
<![endif]-->

如果浏览器小于IE 6：

<!--[if lte IE 6]>
  <link rel="stylesheet" type="text/css" media="screen, projection" href="http://universal-ie6-css.googlecode.com/files/ie6.0.3.css" />
<![endif]-->

基于浏览器的CSS条件

3 个答案: