瀏覽器兼容的改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

---

 

（待續。。。）