css 兼容性处理

可以使用<!--[if IE]>style标签<![endif]-->来控制

<!--正常写法-->
<style>
body{
		background: #F0f url() repeat scroll top;
	}
</style>

<!--ie 6,8,9 支持 -->
<!--[if IE]>
<style>
	body{
		background: #FF0 url() repeat scroll top;
	}
</style>
<![endif]-->

<!--[if IE 7]>
<style>
	body{
		background: #F00 url() repeat scroll top;
	}
</style>
<![endif]-->

<!--[if IE 8]>
<style>
	body{
		background: #0F0 url() repeat scroll top;
	}
</style>
<![endif]-->

<!--[if IE 9]>
<style>
	body{
		background: #00f url() repeat scroll top;
	}
</style>
<![endif]-->

　　在IE7、8、9、和其它的浏览器下会显示不同的背景，会分别调用其中的样式，优势：分的清楚；劣势：要写多个<style>中。

-----------下面使用属性hack---------------------

<style>
body{
		background: #F0f ;
		_background: #Ff0 ;/*据说IE6 本人没有IE6没测试*/
		*background: #F00 ;/*IE7*/
		+background: #0f0 ;/*IE7*/
		background: #00f\9;/*IE7，8，9，10*/
		background: #0ff\0;/*IE8，9，10，11*/
	}
</style>

　　优势：使用方便；劣势：好像只能区分IE7和IE11，无法区分IE8，9，10。

-----------下面使用媒体hack----------------------

<style>
	body{
		background: #F00 ;
	}
	*body{/*IE7*/
		background: #0f0 ;
	}
	
	@media \0screen {/*IE8*/
		body{
		background: #00f ;
		}
	}
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*IE10，11*/
		body{
		background: #f0f ;
		}
	} 
</style>

　　优势：可以区分IE7，IE8还有IE9(因为IE10和IE11支持最后一种方式，变相把第一种过滤为IE9)，劣势：需要多次选择同一对象写css

总结：我们会发现媒体hack可以区分7，8，9，而属性hack可以区分10和11，这样我们就可以把IE从7到11的样式全区分出来了。

（本人没IE6故而没有测试，希望测试过IE6的给留个言！）