前端開發-瀏覽器兼容的坑

前端開發-瀏覽器兼容的坑

最近開始整理前端開發的瀏覽器兼容問題，初次發版內容少一點，後續會持續更新內容~

一、JS 篇

1.new Date() —safari瀏覽器需要特殊照顧

// 對於一個代表時間的字符串
var  dateTimeStr  = "2019-10-10 10:10:10";
// 在谷歌瀏覽器上可以使用 new Date（）將其轉換爲時間戳,但是在safari上卻會報錯
new Date(dateTimeStr)
// chrome 正常 ； safari 會報 Invalid Date
// 處理方法：
// 將時間字符串中的'-'轉換爲'/'
dateTimeStr =  dateTimeStr.replace(/-/g, '/')
new Date(dateTimeStr) 
// 現在在谷歌瀏覽器還有safari就都正常了。

2.event 事件的兼容

關於event的兼容，在我寫的這篇文章中有所提到，其中的方法可以直接使，JavaScript — event介紹以及兼容處理

3.獲取光標位置–ie

// thisDom 爲目標 dom 節點
// 非 ie 瀏覽器,如下獲取光標位置
thisDom.selectionStart  
// ie 瀏覽器, 如下
let range = document.selection.createRange()
range.collapse(false)
range.setEndPoint('StartToStart', thisDom.createTextRange())
position = range.text.length

4.瀏覽器類型判斷

// 瀏覽器類型判斷
function browserType () {
    var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1; //判斷是否Opera瀏覽器
    var isIE = window.ActiveXObject || "ActiveXObject" in window
    var isEdge = userAgent.indexOf("Edge") > -1; //判斷是否IE的Edge瀏覽器
    var isFF = userAgent.indexOf("Firefox") > -1; //判斷是否Firefox瀏覽器
    var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判斷是否Safari瀏覽器
    var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1 && !isEdge; //判斷Chrome瀏覽器
    if (isIE) {
        var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
        reIE.test(userAgent);
        var fIEVersion = parseFloat(RegExp["$1"]);
        if (userAgent.indexOf('MSIE 6.0') != -1) {
            return "IE6";
        } else if (fIEVersion == 7) {
            return "IE7";
        }
        else if (fIEVersion == 8) {
            return "IE8";
        }
        else if (fIEVersion == 9) {
            return "IE9";
        }
        else if (fIEVersion == 10) {
            return "IE10";
        }
        else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
            return "IE11";
        }
        else {
            return "0"
        }//IE版本過低
    }
    if (isFF) {
        return "FF";
    }
    if (isOpera) {
        return "Opera";
    }
    if (isSafari) {
        return "Safari";
    }
    if (isChrome) {
        return "Chrome";
    }
    if (isEdge) {
        return "Edge";
    }
}

二、HTML 篇

1.textarea的rows不能爲0，或者空’’，會報錯；

三、CSS篇

0.整理好的css兼容文章

a、ie6的css兼容問題

1.textarea–ie的滾動條

textarea在ie上會有滾動條，可以嘗試在外面包裹一層div，使textarea的寬度大於外層div，使外層div遮住滾動條。

2.滾動條—ie

ie上的垂直滾動條，不包含在width裏面；在谷歌瀏覽器中，則會包含在width裏；[設置padding的時候需要注意]

3.line-height—ie

ie上的line-height和谷歌裏面的不太一樣，主要是盒模型的問題。ie中的line-height需要減去上下padding之和。

4.flex—ie8

ie8不支持flex佈局

5.unset—ie

ie不支持unset覆蓋，比如在前面寫了border:1px solid #000,後面如果寫border-bottom:unset;的話，不會將bottom-bottom清空。不過設置爲none則會有效。

6.input 在 ie11 上會自帶叉號

// 清除input在ie11上的自帶的叉號
input::-ms-clear{display:none;}
input::-ms-reveal{display:none;}

7.ie10+ 以及 ie6~ie10的hack寫法

// 兼容ie10+
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 .className{
     
 }
}
.className{
    //IE6/IE7/IE8/IE9/IE10都生效
    padding-right: 22px \9;
}

最近在搞一個和前端程序員相關的公號，除了技術分享之外，也增加了對於職業發展、生活記錄之類的文章，歡迎大家關注，一起聊天、吐槽，一起努力工作，認真生活！