css3兼容IE8的方案 各个ie的hack

虽然现在很多项目已经对低版本IE不要求了，但是还有部分公司对IE8还是很执着的，咱作为屌丝前端程序员不能和老板说前端潮流，不能说趋势，只能动脑子了，下面就分享一些css3兼容ie8的方案思路。主要是实现弯道超车。

比如css3的nth-child选择器，它有多好用就不解析了，问题它不兼容ie8，怎么破呢？

1.用jq选择器实现弯道超车，比如我想选择前面五个li，可以这样选。$("li:nth-child(-n+5)").css().这样就利用jq实现了兼容，但是能用css解决的就尽力不用js，所以有了方案二

2.利用ie8支持first-child来选择第一个，利用ie8支持相邻选择器来选第二个第三个，选择第二个，li:first-child + li, 同理，第三个可以这样选：li:first-child +li +li;

上面两个案例主要是讲了两种思路，一种是利用js，一种是利用ie8支持的选择器通过变形来达到相同的效果，但是还有一点小缺陷，比如在谷歌里面会把这种只要在ie8里面才需要起效的css也会渲染出来，作为一个强迫症患者前端来讲这是不能忽略的，所以接下来介绍一下各个ie的hack。

CSS hack方式一：条件注释法

　

这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

	只在IE下生效
	<!--[if IE]>
	这段文字只在IE浏览器显示
	<![endif]-->

	只在IE6下生效
	<!--[if IE 6]>
	这段文字只在IE6浏览器显示
	<![endif]-->

	只在IE6以上版本生效
	<!--[if gte IE 6]>
	这段文字只在IE6以上(包括)版本IE浏览器显示
	<![endif]-->

	只在IE8上不生效
	<!--[if ! IE 8]>
	这段文字在非IE8浏览器显示
	<![endif]-->

	非IE浏览器生效
	<!--[if !IE]>
	这段文字只在非IE浏览器显示
	<![endif]-->

CSS hack方式二：类内属性前缀法

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

IE浏览器各版本 CSS hack 对照表

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Y

Y

Y

Y

N

Y

N

Y

N

Y

+

+color

绿色

Y

Y

Y

Y

N

Y

N

Y

N

Y

-

-color

黄色

Y

Y

N

N

N

N

N

N

N

N

_

_color

蓝色

Y

Y

N

Y

N

Y

N

Y

N

N

#

#color

紫色

Y

Y

Y

Y

N

Y

N

Y

N

Y

\0

color:red\0

红色

N

N

N

N

Y

N

Y

N

Y

N

\9\0

color:red\9\0

粉色

N

N

N

N

N

N

Y

N

Y

N

!important

color:blue !important;color:green;

棕色

N

N

Y

N

Y

N

Y

N

Y

Y

说明：在标准模式中

• “-″减号是IE6专有的hack
• “\9″ IE6/IE7/IE8/IE9/IE10都生效
• “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
• “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

目前最常见的是

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

ps:hack虽好，可不要滥用哦，能不用尽量不用