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

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

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

1、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";
    }
}
複製代碼

2、HTML 篇

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

3、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;
}
複製代碼