HTML、CSS、JavaScript判断 IE

  做过前端开发的应该知道 IE 是最令码农头疼的浏览器。适应性不好先不说吧,自家浏览器的不同版本的差别还那么大,IE8及以下版本的浏览器不支持 html5,不支持 css3,甚至有些 JavaScript 还不支持!!!然而,IE 是自带在 Windows 操作系统的,不同 Windows 版本自带的 IE 版本也不一样,你装了系统就会带上 IE 浏览器,IE浏览器一般不会自动更新,不像其他浏览器你可以自己选择,而且你一般都会选择最新的。而且,不是每个网民都像前端码农一样知道 IE 的缺点,使用 Chrome 浏览器其实大部分是码农... 嗯,也就是你不得不考虑微笑。我经常会发出感叹:就特么不能统一一下世界上的浏览器标准吗发火!!!卒。不过,假如码农能不屈服于这么多的浏览器厂家,只用兼容性好的内容,相信可以加快前端开发的标准统一吧...


  下面是我根据实践经验总结出来的,分别从 html、css、JavaScript 三个层面来判断浏览器是否 IE。注意,Edge浏览器不当做 IE,它其实还挺好用的。另外,IE10 问题也不多。


一、HTML 判断 IE

使用的是 IE 条件注释法

判断格式:

<!--[if  arg1 IE  arg2]><![endif]-->

其中,arg1的取值为:

1)不写,但代表相等

2)lt,也就是“lower than”

3)lte,也就是“lower than or equal”

3)gt,也就是“greater than”

4)gte,也就是“greater than or equal”


arg2的取值是版本数字号,可以是 5, 6, 7, 8, 9,也可以不写。

注意:IE10及之后已经不支持这种格式写法。也就是<!--[if IE]><![endif]-->只能识别 IE9及以下版本。


你可以在标签中间写任何内容,只有版本对上了,才会被识别。

比如:

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

<!--[if lt IE 7]>
    <h4>IE7以下版本可识别</h4>
<![endif]-->

<!--[if gte IE 7]>
    <script>
        alert("IE7以及IE7以上版本可识别");
    </script>
<![endif]-->

二、CSS 判断 IE

使用的是一种叫做 hack 的东西。除了上面说过的 IE 注释法可以让浏览器去选择哪个 css 文件之外,还有另外两种方法,分别是类内属性前缀法、选择器前缀法。

因为有一份更好的博客,所以就不写了...

可以访问:http://blog.csdn.net/freshlover/article/details/12132801


三、JavaScript 判断 IE

下面的函数亲测有效:

    function getBrowserVersion() {
        var userAgent = navigator.userAgent.toLowerCase();
        if (userAgent.match(/msie ([\d.]+)/) != null) {
            //ie6--ie9
            uaMatch = userAgent.match(/msie ([\d.]+)/);
            return 'IE' + uaMatch[1];
        } else if (userAgent.match(/(trident)\/([\w.]+)/)) {
            uaMatch = userAgent.match(/trident\/([\w.]+)/);
            switch (uaMatch[1]) {
                case "4.0":
                    return "IE8";
                    break;
                case "5.0":
                    return "IE9";
                    break;
                case "6.0":
                    return "IE10";
                    break;
                case "7.0":
                    return "IE11";
                    break;
                default:
                    return "undefined";
            }
        }
        return "undefined";
    }


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值