web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题。在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法。

 

常规js方法

找到一个方法,还不错,可以识别出各种浏览器的版本:

 /**
* 获取浏览器版本
* @returns {Array}
*/
function browserVersion() {
var browserType = "";
var browserVersion = 0;
    var ua = navigator.userAgent.toLocaleLowerCase();
 
    if (ua.match(/msie/) != null) {
        browserType = "IE";
        browserVersion = ua.match(/msie ([\d.]+)/)[1];
    } else if (ua.match(/trident/) != null && ua.match(/rv/) != null) {
        browserType = "Edge";
        browserVersion = ua.match(/rv:([\d.]+)/)[1];
} else if (ua.match(/firefox/) != null) {
        browserType = "Firefox";
browserVersion = (ua.match(/firefox\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
    } else if (ua.match(/opera/) != null) {
        browserType = "Opera";
browserVersion = (ua.match(/opera\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
    } else if (ua.match(/chrome/) != null) {
        browserType = "Chrome";
browserVersion = (ua.match(/chrome\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
    } else if (ua.match(/safari/) != null) {
        browserType = "Safari";
browserVersion = (ua.match(/safari\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
    }
    var arr = new Array(browserType, browserVersion);
    return arr;
}

  

在代码中直接使用也比较简单了。
 

IE的条件注释

在一次偶然的机会看网金社的前端代码,发现一段很特别的注释:
 
这个貌似有点神奇,看代码的意思是一个跳转,但显示是注释的语句,于是抱着试一试的态度将浏览器切换到IE低版本,果然是有效果的。赶紧网上开始找这方面的资料,有一些用法说明,看来确实是可行的方案。
 
条件注释属性:

gt : greater than,选择条件版本以上版本,不包含条件版本

lt : less than,选择条件版本以下版本,不包含条件版本

gte : greater than or equal,选择条件版本以上版本,包含条件版本

lte : less than or equal,选择条件版本以下版本,包含条件版本

! : 选择条件版本以外所有版本,无论高低

用法:

<!--[if IE]>用于 IE <![endif]-->

<!--[if IE 6]>用于 IE6 <![endif]-->

<!--[if IE 7]>用于 IE7 <![endif]-->

<!--[if IE 8]>用于 IE8 <![endif]-->

<!--[if IE 9]>用于 IE9 <![endif]-->

<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->

<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->

<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->

<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->

<!--[if !IE]> -->用于非 IE <!-- <![endif]-->

学习笔记:发现一个IE版本判断的好方法的更多相关文章

  1. 【前端学习笔记01】JavaScript源生判断数据类型的方法

    原始类型(值类型):Undefined.Null.Number.String.Boolean: 对象类型(引用类型):Object: typeof  可以识别标准类型,null外(返回Object): ...

  2. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  3. C#可扩展编程之MEF学习笔记(三):导出类的方法和属性

    前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

  4. blfs(systemv版本)学习笔记-制作一个简单的桌面系统

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+i3-wm(窗口+桌面)+lightdm(显示管理器+登录管理器) 链接: lfs ...

  5. Asp.Net 学习笔记(IIS不同版本和Asp.Net)

    主要目的是在网上记录一下学习笔记,如有不对,请指出 谢谢!! iis5.x: 存在问题,inet info收到动态请求后,aspnt_isapi.dll会被加载到inetinfo.exe(挂载w3sv ...

  6. 多线程编程学习笔记——编写一个异步的HTTP服务器和客户端

    接上文 多线程编程学习笔记——使用异步IO 二.   编写一个异步的HTTP服务器和客户端 本节展示了如何编写一个简单的异步HTTP服务器. 1.程序代码如下. using System; using ...

  7. Python学习笔记----数据类型 运算符 循环 条件判断

    1. Python安装 在官网www.python.org下载安装程序,可以支持的操作系统linux,windows,mac. Python版本:2.x和3.x,分别有x86和x64. 在Window ...

  8. Android开发学习笔记--给一个按钮定义事件

    学习Android的第一天,了解了各种布局,然后自己动手画出了一个按钮,然后给按钮定义了一个事件是弹出一条消息显示“我成功了!”字样,具体过程如下: 1.修改布局文件activity_main.xml ...

  9. GeneXus学习笔记——创建一个知识库 哈哈哈哈!

    终于想到写什么东西了(绝对不是因为懒 好吧 信我)  那么进入正题 我们写项目的时候 遇到一些问题啥的 总会听到大佬说:“这有什么难的 说到底不就是简单的增删改查么"  然后我们就会露出 Σ ...

随机推荐

  1. 清空Github上某个文件的历史版本

    title: 清空Github上某个文件的历史版本 author: 青南 date: 2015-01-08 16:04:53 categories: [经验] tags: [Github,histor ...

  2. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统(70)-微信公众平台开发-成为开发者

    系列目录 前言: 一.阅读这段系列之前,你必须花半天时间大致阅读微信公众平台的API文档,我尽量以简短快速的语言与大家分享一个过程 二.借助微信公众平台SDK Senparc.Weixin for C ...

  4. Xamarin+Prism开发详解四:简单Mac OS 虚拟机安装方法与Visual Studio for Mac 初体验

    Mac OS 虚拟机安装方法 最近把自己的电脑升级了一下SSD固态硬盘,总算是有容量安装Mac 虚拟机了!经过心碎的安装探索,尝试了国内外的各种安装方法,最后在youtube上找到了一个好方法. 简单 ...

  5. Mac OS 使用 Vagrant 管理虚拟机(VirtualBox)

    Vagrant(官网.github)是一款构建虚拟开发环境的工具,支持 Window,Linux,Mac OS,Vagrant 中的 Boxes 概念类似于 Docker(实质是不同的),你可以把它看 ...

  6. AJAX实现登录界面

    使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒.但是,php跳转的方式 需要额外加载其他界面,用户体验差.AJAX可实现当前页面只刷新需要的数据,不对当前网页进行 重新加载或者是 ...

  7. 张高兴的 UWP 开发笔记:横向 ListView

    ListView 默认的排列方向是纵向 ( Orientation="Vertical" ) ,但如果我们需要横向显示的 ListView 怎么办? Blend for Visua ...

  8. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  9. Android中Fragment和ViewPager那点事儿(仿微信APP)

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...

  10. Android开发学习—— shape标签的使用

    参考这片文章http://www.cnblogs.com/armyfai/p/5912414.html