浏览器兼容性总结

浏览器兼容正常来讲的其实都是对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. }