浏览器兼容的改bug日常

2018-08-10

参考：https://bbs.csdn.net/topics/370155023

初始化css时，直接使用了*，导致后面处理<hr/>标签时，线段总是贴在左边框。设置hr的margin：auto使其能够居中显示一定长度。

*{
    margin: 0;
    padding: 0;
    text-shadow: none;
    word-wrap: break-word;
}
hr{
    margin: auto;
    width: 10%;
    border-top:4px solid #65c9dc;
    text-align:center;
}

IE浏览器版本检测

function IEVersion() {
        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 == 7) {
                return 7;
            } else if(fIEVersion == 8) {
                return 8;
            } else if(fIEVersion == 9) {
                return 9;
            } else if(fIEVersion == 10) {
                return 10;
            } else {
                return 6;//IE版本<=7
            }
        } else if(isEdge) {
            return 'edge';//edge
        } else if(isIE11) {
            return 11; //IE11
        }else{
            return -1;//不是ie浏览器
        }
    }
    if(IEVersion()==6){}

---

 2018-09-05

backgroud IE8以及更早的浏览器不支持一个元素多个背景图像，IE7以下不支持inherit，IE8需要严格模式HTML

background-attachment:inherit（css1） 任何IE版本都不支持从父元素继承属性值

background-origin IE9+         

---

 2018-12-26

IE9以下不支持placeholder   2018-12-26

https://www.cnblogs.com/candice-cc/p/5946100.html

function placeholderForIE8($ele) {
        function isPlaceholder() {
            var input=document.createElement("input");
            return "placeholder" in input;
        }
        //判断placeholder是否是input的属性和是否是input的原型属性
        if (isPlaceholder()==false &&!("placeholder" in document.createElement("input"))) {
            $('input[placeholder],textarea[placeholder]').each(function(){
                var $this = $(this),
                    textPlaceholder = $this.attr("placeholder");
                if ($this.val() === "") {
                    if ($this.attr("name") == "search") {
                        $ele.html("查找联系人");
                    } else {
                        $this.val(textPlaceholder).addClass('placeholder');
                    }
                }
                $this.focus(function () {
                    if ($ele.html() == textPlaceholder) {
                        $ele.html("");
                    }
                    if ($this.val() === textPlaceholder) {
                        $this.val("").removeClass('placeholder');
                    }
                }).blur(function () {
                    if ($this.val() === "") {
                        if ($this.attr("name") == "search") {
                            $ele.html("查找联系人");

                        } else {
                            $this.val(textPlaceholder).addClass('placeholder');
                        }
                    }
                }).closest('form').submit(function () {
                    if ($this.val() === text) {
                        $this.val('');
                    }
                });
            });
        }
    }

postion:fixed IE8兼容方法：

  _position:absolute;
   _left:expression(eval(document.documentElement.scrollLeft));
   _top:expression(eval(document.documentElement.scrollTop));

IE8 margin-top失效 https://blog.csdn.net/linshutao/article/details/19120571

IE8 $(window).height()获取值为0 https://www.cnblogs.com/fengzekun/p/3909557.html

---

2018-12-27

 解决动态添加元素 父级元素使用百分比定义宽度失效bug  https://blog.csdn.net/farmwang/article/details/50775145  

---

2018-12-28

IE8 隐藏元素操作解决方案https://www.jb51.net/article/22822.htm

IE8不支持形如“nr.val().trim()”的写法，改为“$.trim(nr.val()) ”，既支持IE8 也支持主流浏览器

---

2019-01-13

IE9 tabel td 不换行问题 已解决 https://blog.csdn.net/liuyong0818/article/details/4829671

自适应屏幕高度：直接overflow-y:scroll会在未超过高度时，显示空白滚动条，所以直接overflow：hidden，                               然后超出高度后再overflow-y：scroll

---

2019-06-10

IE9  input 未指定name属性值时，不能自动获取浏览器缓存的表单历史记录  2019-06-10

---

 

（待续。。。）