浏览器兼容问题

1.ie8不支持background-size设置背景图大小
用filter：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', src='背景图url', sizingMethod='scale');

参数:
1.enabled：设置或检索滤镜是否激活，true/false，默认为true
2.src：图片地址
3.sizingMethod：设置或检索滤镜作用的对象的图片在容器边界内的显示方式，crop剪切/image默认值/scale缩放图片

2.ie8支持的伪类选择器只有:hover,:focus,:first-child
想实现li:nth-of-type(2)只能用li:first-child+li

ie8不支持css border-radius, css3的属性基本上都是要求IE9以上的，border-radius，box-shadow都是css3的属性
解决方法：使用css3pie，将解压后的PIE.htc文件放在目标html同一路径下，

img{
    position:relative;
    z-index:2
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius: 5px;
    behavior: url(PIC.htc);
}

注意：

必须设置position:relative 和 z-index:2
behavior引入PIE.htc文件，路径为相对与html的路径，不是相对于当前css的路径

3.sfaire浏览器中input如果设置了高度，输入的时候光标就会跑到上面去了，所以要用padding撑开
4.ie8不支持placeholder属性，用js实现
1.先判断浏览器是否支持placeholder属性，如果不支持就模拟placeholder
2.创建一个label标签：密码：标签里的内容为placeholder属性值，再讲标签覆盖到对应的input上

; (function (win) {

    win.isPlaceholer = function () {
        var input = document.createElement("input");
        return "placeholder" in input;
    };
  
    win.placeholder = function () {

        if (!isPlaceholer()) {
            var Placeholder =function (obj) {
                this.input = obj;
                var te = obj.getAttribute('placeholder');
                this.label = document.createElement('label');
                this.label.innerHTML = te;
                this.label.id = obj.id + 'Label';
                this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:14px;';
                if (obj.value !== '') {
                    this.label.style.display = 'none';
                }
                this.init();
            };
            Placeholder.prototype = {

                getxy: function (obj) {
                    var left, top;
                    if (document.documentElement.getBoundingClientRect) {
                        var html = document.documentElement,
                        body = document.body,
                        pos = obj.getBoundingClientRect(),
                        st = html.scrollTop || body.scrollTop,
                        sl = html.scrollLeft || body.scrollLeft,
                        ct = html.clientTop || body.clientTop,
                        cl = html.clientLeft || body.clientLeft;
                        left = pos.left + sl - cl;
                        top = pos.top + st - ct;
                    } else {
                        while (obj) {
                            left += obj.offsetLeft;
                            top += obj.offsetTop;
                            obj = obj.offsetParent;
                        }
                    }
                    return {
                        left: left,
                        top: top
                    };
                },

                getwh: function (obj) {
                    return {
                        w: obj.offsetWidth,
                        h: obj.offsetHeight
                    };
                },

                setStyles: function (obj, styles) {
                    for (var p in styles) {
                        obj.style[p] = styles[p] + 'px';
                    }
                },
                init: function () {
                    var label = this.label,
                    input = this.input,
                    getXY = this.getxy,
                    xy = this.getxy(input),
                    wh = this.getwh(input);
                    this.setStyles(label, { 'width': wh.w, 'height': wh.h, 'lineHeight': 40, 'left': xy.left + 8, 'top': xy.top });
                    document.body.appendChild(label);
                    label.onclick = function () {
                        this.style.display = "none";
                        input.focus();
                    };
                    input.onfocus = function () {
                        label.style.display = "none";
                    };
                    input.onblur = function () {
                        if (this.value === "") {
                            label.style.display = "block";
                        }
                    };
                    if (window.attachEvent) {
                        window.attachEvent("onresize", function () {
                            var xy = getXY(input);
                            Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
                        });
                    } else {
                        window.addEventListener("resize", function () {
                            var xy = getXY(input);
                            Placeholder.prototype.setStyles(label, { 'left': xy.left + 8, 'top': xy.top });
                        }, false);
                    }
                }
            };

            var inpColl = $("#Box input:visible");//这里是页面上要添加placeholder支持的input
            //var inpColl = document.getElementsByTagName('input'),          
            var textColl = document.getElementsByTagName('textarea');//这里是页面上要添加placeholder支持的textarea
            //var lableArr = $("#Box lable");
            var toArray = function (coll) {
                for (var i = 0, a = [], len = coll.length; i < len; i++) {
                    a[i] = coll[i];
                }
                return a;
            };
            var inpArr = toArray(inpColl),
            textArr = toArray(textColl),

            placeholderArr = inpArr.concat(textArr);
            for (var i = 0; i < placeholderArr.length; i++) {
                if (placeholderArr[i].getAttribute('placeholder') !== null) {

                    new Placeholder(placeholderArr[i]);
                }
            }
        }

    };
}(window));

5.ie8不支持css3动画
6.element-ui在火狐浏览器下的滚动问题
用<el-scrollbar></el-scrollbar>组件

JIA's blog

浏览器兼容问题

vue路由守卫