瀏覽器兼容性總結

瀏覽器兼容正常來講的其實都是對IE6-IE8的兼容，下面IE瀏覽器沒有特殊說明均是指IE6-IE8.

1. IE瀏覽器中複選框`checkbox`等失去了焦點 纔會觸發change事件。

 //hack

if (!$.support.leadingWhitespace) {// IE 6-IE8 ?
  $('input:checkbox').click(function () {
   this.blur();  
   this.focus();
  });  
 };

//另外順便附上一個利用html特想檢測當前ie版本的函數

var isIE = function(ver){
       　　 var b = document.createElement('b')
        　　b.innerHTML = '<!--[if IE ' + ver + ']><i></i><![endif]-->'
        　　return b.getElementsByTagName('i').length === 1
    　　}

2. 默認狀況下，表單只有單個輸入框，不管提交按鈕的type="submit"仍是type="button"類型，回車即提交,e.preventDefault()也沒用。

• 當type="submit"時，不管有幾個type="text"輸入框，回車均表示提交。（submit）
• 當type="button"時，且存在多個輸入框，回車不提交。（button）
• 解決單個輸入框的回車即提交問題，參考第二點：能夠增長一個input="text"，隱藏; 而後type類型爲button。

3. 關於setTimeout 

• setTimeout() 是一個堆棧，調用多個以後，clearTimeout(),只會先清除後加的setTimeout()函數。
• JavaScript執行分爲執行棧和任務隊列。只有執行棧爲空了，纔會去讀取任務隊列，將任務隊列的事件加入到執行棧當中。
  因此setTimeout就算設置執行時間爲0也是會後於執行棧的事件執行。這就是就算設置延遲時間爲0也不能保證回調函數立刻執行的緣由。

    setTimeout(function(){console.log(1);}, 0);
    console.log(2);

以上代碼輸出的結果順序爲二、1；

setTimeout(fn,0)的意思是儘量早地執行，立刻把回調函數加到任務列表而已。

4. js計算可能有很長一串小數點的問題，這是js原生的bug？能夠經過如下方式處理

• 若是知道計算結果的小數點位數，能夠用toFixed（）解決，不然要用下面這種加工過的函數解決；
• 也能夠用下面封裝好的加減乘除，消除js原生的bug

function add(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e) + mul(b, e)) / e;
}

function sub(a, b) {
    var c, d, e;
    try {
        c = a.toString().split(".")[1].length;
    } catch (f) {
        c = 0;
    }
    try {
        d = b.toString().split(".")[1].length;
    } catch (f) {
        d = 0;
    }
    return e = Math.pow(10, Math.max(c, d)), (mul(a, e) - mul(b, e)) / e;
}

function mul(a, b) {
    var c = 0,
        d = a.toString(),
        e = b.toString();
    try {
        c += d.split(".")[1].length;
    } catch (f) {}
    try {
        c += e.split(".")[1].length;
    } catch (f) {}
    return Number(d.replace(".", "")) * Number(e.replace(".", "")) / Math.pow(10, c);
}

function div(a, b) {
    var c, d, e = 0,
        f = 0;
    try {
        e = a.toString().split(".")[1].length;
    } catch (g) {}
    try {
        f = b.toString().split(".")[1].length;
    } catch (g) {}
    return c = Number(a.toString().replace(".", "")), d = Number(b.toString().replace(".", "")), mul(c / d, Math.pow(10, f - e));
}

5. 使用jsonp

注意jsonp請求的返回值要用jsonp的函數名特別包裝才能夠，取到的數據會報錯————SyntaxError: missing ; before statement，在下面的方法中jsonp的函數名是--jsonpcallback

jsonp 在現代瀏覽器中，若是趕上網絡不通等狀況，會靜靜地失敗，也就是連error也不進去，而IE則可以跑進去，因此爲了瀏覽器統一，最好就不要寫error回調

/**
 * ajax_jsonP
 * @param url string 地址
 * @param url obj or post string 數據
 * @param callback function 回調
 * @param errorback function 錯誤回調
 * */
var ajaxJsonp = function (url, params, callback, errorback) {
    layer.load();

    $.ajax({
        type : "get",
        url : url,
        data:params,
        dataType : "jsonp",
        jsonp: "jsonpcallback",
        success : function(thisData){
            if (thisData.retCode == "SUCCESS") {
                if (callback != undefined) {
                    callback(thisData);
                }
            }else {if (errorback != undefined) {
                        errorback(thisData);
                    }
            }
        },
      
    });

};

 6.瀏覽器自動填充用戶名跟密碼

瀏覽器會給第一個密碼框type=password 以及它的前一個文本框填充帳號進行填充，利用這個特性，咱們能夠在表單的最前面加一個隱藏的密碼框

.clear-pwd {position: absolute;left: -9999px;visibility: hidden;}
.clear-pwd2 {display: none;}//經測試，在Ubuntu下面的瀏覽器是無效的，因此建議用上面的樣式
<form>
<input class="clear-pwd" name="fix" type="password">
<input type="text"/>
<input type=password  autocomplete="false">
</form>

7. 瀏覽器默認會使用科學計數法

這個時候能夠用var num2 = new Number(num);或者 parseFloat(num).toString();

8. Firefox下blur裏面設置focus會無效

這個時候咱們能夠先添加focus事件到setTimeout()的任務隊列上面；

$input.blur(function(){
  　　　　………………
        setTimeout(function(){$input.focus()},0)；
}

9. 判斷手機端

var _isMobile = 'createTouch' in document && !('onmousemove' in document)
    || /(iPhone|iPad|iPod)/i.test(navigator.userAgent);

10. meta 瀏覽器渲染模式

http-equiv="X-UA-Compatible"這個是IE8的專用標記，是用來指定Internet Explorer 8 瀏覽器模擬某個特定版本IE瀏覽器的渲染方式，以此來解決IE瀏覽器的兼容問題。

<meta name="renderer" content="webkit"><%--360 優先使用極速模式--%> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

11.js數值比較的坑

數值比較大小 通常咱們200>1000 //false 這個是沒有異議的
但不少狀況下咱們是"200">"1000" //true，建議要數值比較大小，用運算符 + -， "200"-"1000">0 //false

 

12.chrome input 去掉黃色背景

黃色背景的緣由是chrome會給瀏覽器加上私有屬性：input:-webkit-autofill

    input:-webkit-autofill {
    background-color: #FAFFBD;
    background-image: none;
    color: #000;
    }

解決方案：

1. input:-webkit-autofill {
2. -webkit-box-shadow: 0 0 0px 1000px white inset;
3. border: 1px solid #CCC!important;
4. }