浏览器兼容性总结
浏览器兼容正常来说的其实都是对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);
以上代码输出的结果顺序为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; }
解决方案：
- input:-webkit-autofill {
- -webkit-box-shadow: 0 0 0px 1000px white inset;
- border: 1px solid #CCC!important;
- }
