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

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

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

这种写法专为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}

转载于:https://www.cnblogs.com/fengxiaoqing/p/6409318.html

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

条件注释判断浏览器!--[if !IE]!--[if IE]!--[if lt IE 6]!--[if gte IE 6]
条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]> <!- ...
条件注释判断浏览器版本!--[if lt IE 9]
 除IE外都可识别  <!--[if IE]> 所有的IE可识别 <![ ...
条件注释判断浏览器版本!--[if lt IE 9]（转载）
 除IE外都可识别  <!--[if IE]> 所有的IE可识别 <![ ...
浏览器兼容--条件样式，选择符前缀，样式属性前缀
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑原文地址-- http://www.w3cplu ...
浏览器兼容--条件样式，选择符前缀，样式属性前缀（转）
浏览器兼容--条件样式,选择符前缀,样式属性前缀 2012-12-05 09:20 by greenal, 1570 阅读, 0 评论, 收藏, 编辑原文地址-- http://www.w3cplu ...
使用条件注释完成浏览器兼容
最近做的纯PC站需要兼容到IE8,一般使用css hack就能够完成,但如果兼容到IE7及以下就很头疼了,使用条件注释动态加载脚本是个不错的选择. 注释不同的浏览器版本 : (1).支持所有的IE浏览 ...
解决echarts在360浏览器兼容模式和ie浏览器不兼容问题
问题一:js 脚本在360浏览器兼容模式会被阻止,需要手动允许程序才能运行. 问题二:js 脚本在ie浏览器会弹出 "echarts lnternet Explo ...
php判断浏览器内核,jquery如何判断浏览器的内核
jquery判断浏览器内核的方法:使用条件语句判断,代码为[$(function(){if($.browser.msie) {alert("IE浏览器");}else if($.b ...
360浏览器兼容模式下IE内核版本
问题最近在跟客户演示系统时,自己电脑IE 11下好好的,我们web系统最低支持到IE9.在客户电脑上,IE9浏览器下可以正常浏览,但是360兼容模式下,页面什么也不显示. 通过F12调试工具发现,3 ...
浏览器兼容_查成绩浏览器不兼容怎么办？
2020教资交流群 (扫码进群) 加群及时了解考试动态.免费备考资料今晚19:00,面试报名指导及复习计划? 问题:教师资格证查询不是IE6-IE10系列浏览器,怎么办? 答:由于系统兼容性不足,所 ...

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

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

最新文章

热门文章