Javascript 判断 IE 版本,实现插入不同的 Style 标签和样式

由于 IE 浏览器的兼容性问题,IE 10 以下的版本会出现兼容性问题,有时需要编写不同的样式来达到兼容的效果,

下面的代码可以实现判断 IE 版本号,并根据不同版本插入 Style CSS

<script>
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
    var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
    var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
    var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
    if(isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (fIEVersion < 10) {
            var css = '.menu_item li:hover > ul,.menu_item ul li:hover > ul,.menu_item .focus > ul,.menu_item .focus > ul{clip:inherit;overflow:inherit;height:inherit;width:inherit;}',
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');
            head.appendChild(style);
            style.type = 'text/css';
            if (style.styleSheet) {
            // This is required for IE8 and below.
                style.styleSheet.cssText = css;
            } 
            else {
                style.appendChild(document.createTextNode(css));
            }
        }  
        else {
            $(document).ready(function () {
                $(document).click(function() {
                    $(".menu_item>.menu-item-has-children>a").removeAttr("href");
                    var nav = $("#" + $(this).attr("id") + " .sub-menu");
                    nav.css('clip', '');
                    var nav_sub_menu = $(".sub-menu");
                    nav_sub_menu.css('clip', '');
                    $(".menu_item").css('cursor', 'pointer');
                });
                $(".menu_item .menu-item-has-children").click(function(event) {
                    event.stopPropagation();
                    $(".menu_item>.menu-item-has-children>a").removeAttr("href");
                    var nav = $("#" + $(this).attr("id") + " .sub-menu");
                    
                    if (nav.css('clip') == 'inherit' || nav.css('clip') == 'auto') {
                        nav.css('clip', '');
                    }
                    else {
                        var nav_sub_menu = $(".sub-menu");
                        nav_sub_menu.css('clip', '');
                        nav.css('clip', 'inherit');
                    }
                    $(".menu_item").css('cursor', 'pointer');
                });
            });
        }
    }</script>

 

posted @ 2020-05-29 12:08  Ryan_zheng  阅读(578)  评论(0编辑  收藏  举报