IE9兼容

css hack兼容IE

参考：https://blog.csdn.net/freshlover/article/details/12132801

 

1.let、const更换为var声明

2.箭头函数更换为function

3.模板字符串``使用字符串拼接

4.flex布局更换为float浮动和positon定位

5.颜色rgb更换为16进制，rgba也可以通过识色转换为16机制，不过不透明，如果介意透明度的话可以外套一个div设置opacity透明度属性

6.meta

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

 

一、判断IE

    //IE浏览器
    var explorer = window.navigator.userAgent.toLowerCase();
    var ver = 9999
    if (explorer.indexOf("msie") >= 0) {
        ver = parseInt(explorer.match(/msie ([\d.]+)/)[1]);
        // ver为IE版本  
    }

 

二、placeholder不显示

    .inp {
        color: #cccccc\0;
    }

 　　<input type="text" name="search_name" id="search_name" placeholder="搜索" datavalue="搜索">
    <script>
        function placeholder(target) {
            $(target).val($(target).attr("datavalue")).addClass("inp");
            $(target).focus(function () {
                if ($(this).val() == $(this).attr("datavalue")) {
                    $(this).val("").removeClass("inp");
                }

            })
            $(target).blur(function () {
                if ($(this).val() == "" || $(this).val() == $(this).attr("datavalue")) {
                    $(this).val($(target).attr("datavalue")).addClass("inp");
                }
            })
        }
        // 如果是ie9及以下调用方法
        placeholder("#search_name")

 

三、获取自定义属性‘data-’

            var dataset = {}
            if (!e.target.dataset) {
                // var attrs = $(e.target).get(0).attributes
                var attrs = e.target.attributes
                for (var i = 0; i < attrs.length; i++) { //是否是data- 开头
                    var matchStr = attrs[i].name.match(/^data-(.+)/);
                    if (matchStr) { //data-auto-play 转成驼峰写法 autoPlay
                        name = matchStr[1].replace(/-([\da-z])/gi, function (all, letter) {
                            return letter.toUpperCase();
                        });
                        dataset[name] = attrs[i].value;
                    }
                }
            }