浏览器兼容性总结

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

解决方案:

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

 

posted @ 2017-03-31 11:18  dosir  阅读(486)  评论(0编辑  收藏  举报