IE浏览器样式兼容解决办法
2016-04-21 本文已影响334人
留七七
有些情况下需要对IE各版本的浏览器应用特殊的样式，这里介绍三种方式来实现这种目的。
条件样式表
通过条件注释为不同版本的IE浏览器引入不同的样式，例如：
<!--[if lte IE 8]><link rel="stylesheet" href="lte-ie-8.css"><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="lte-ie-7.css"><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="lte-ie-6.css"><![endif]-->
也可以在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/)。
**条件类名**
在`<html>`或者`<body>`上,通过条件注释，为不同版本的浏览器添加不同的类名，然后在同一个样式文件里面，对不同的类写不同的样式。例如：
``````````````````
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]> <html class="ie7"><![endif]-->
<!--[if IE 8]> <html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
``````````````````
``````````````````
.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/)
