细嚼浏览器兼容----条件注释判断浏览器版本

这几天主要把去年遇到的问题再梳理一遍，一方面做个加深理解，另一方面也希望给遇到这类问题的童鞋一个前车之鉴。

先来说项目中遇到兼容问题，当时从各种方法里找到了两种可行的，选了其中的一种解决了问题，但两种方法里都涉及 <!--[if .....]>.....<!--[endif]-->语句，现在回头想来，其实虽解决了问题，但这种写法却有待了解，于是又深入查了下相关的资料，现将所得记下。

这种写法专为ie浏览器服务的，只有微软的浏览器看到这行代码才会运行里面的代码，其他浏览器就当它是注释略过去了，测试总结 如下：

<!--[if !IE]><!--> 除IE外都可识别 (实际是ie10及以上可也识别)<!--<![endif]-->
<!--[if IE]> 所有的IE可识别 (ie9及以下的才可识别)<![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别(实际中ie7没识别) <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

注意：IE与后面的版本号之间要有空格，不然的话，就算进入兼容内容也是没效果的。

其实直接从它的语句里就能知道作用：

！IE　　　　除IE以外的浏览器

lt　　　　   less than　　　　　　　　小于运算符

lte　　　    less than or equal     　　小于或等于运算符

gt　　　　  greater than　　　　 　　大于运算符

gte            greater than or equal      大于或等于运算符

算是个小知识点总结吧，注重细节不是坏事，有时候知道解决办法而没解决的原因就是忽略了诸多细节，后续有想法的话，还可以继续补充。

两种解决方法具体如下：

方法一：使用Google的html5shiv包（推荐）

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

由于这两种方法都需要初始化新标签，所以初始化写在了方法二里

方法二：

<!--[if lt IE 9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

然后，再初始化新标签的CSS，因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局：

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}