ie浏览器样式兼容写法_IE浏览器样式兼容解决办法

有些情况下需要对IE各版本的浏览器应用特殊的样式，这里介绍三种方式来实现这种目的。

条件样式表

通过条件注释为不同版本的IE浏览器引入不同的样式，例如：

也可以在CSS文件里面应用条件注释，为同一元素指定不同IE浏览器效果，例如：

/* Main stylesheet */

.foo { color: black; }

/* lte-ie-8.css, for IE8 and older */

.foo { color: green; }

/* lte-ie-7.css, for IE7 and older */

.foo { color: blue; }

/* lte-ie-6.css, for IE6 and older */

.foo { color: red; }

```````````````````

想要了解其他条件注释，参见[这里](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/)。

**条件类名**

在``或者`

`上,通过条件注释，为不同版本的浏览器添加不同的类名，然后在同一个样式文件里面，对不同的类写不同的样式。例如：

``````````````````

``````````````````

``````````````````

.foo { color: black; }

.ie8 .foo { color: green; } /* IE8 */

.ie7 .foo { color: blue; } /* IE7 */

.ie6 .foo { color: red; } /* IE6 and older */

``````````````````

**css hack**

何为css hack呢？我的理解就是不同的浏览器对有些css属性解析不一样，我们可以利用这种特性或者说浏览器漏洞，来为不同的浏览器指定不同的样式。例如：

```````````````

.foo {

color: black;

color: green\9; /* IE8 and older */

*color: blue; /* IE7 and older */

_color: red; /* IE6 and older */

}

```````````````

css hack有多种类型，常见的有* hack,_ hack,*html hack,*+ hack,以及!important hack。详细了解可以参看[这里](https://en.wikipedia.org/wiki/CSS_filter)。其它例子，可以参看[这里](http://www.paulirish.com/2009/browser-specific-css-hacks/)。

前两种方式都是根据条件来写不同的样式。第一种方式为不同版本的浏览器指定不同的样式文件，这样会导致样式文件的可维护性降低，因为一个页面有多个样式文件需要维护。第二种方式虽然可以把样式文件合并到一个样式文件里面，但是页面里面的条件注释也是必不可少的，因为每个页面html里面都要有这种条件注释。最后一种方式可以避免这两种问题，但是写法上面比较复杂。

资料来源：

[https://mathiasbynens.be/notes/safe-css-hacks](https://mathiasbynens.be/notes/safe-css-hacks)

[http://www.webdevout.net/css-hacks](http://www.webdevout.net/css-hacks)

[https://css-tricks.com/how-to-create-an-ie-only-stylesheet/](https://css-tricks.com/how-to-create-an-ie-only-stylesheet/)