IE、谷歌、火狐浏览器兼容性、默认属性样式总结

IE

1、去掉input框中自动添加的 X 和 眼睛图标

情境：在 IE 浏览器下的 input 框中，输入内容时：

  1、 type = text 会自动生成一个 X。
  2、 type = password 会自动生成一个眼睛的图标。

解决：有时为了保证浏览器之间的一致性，就需要将这个样式取消掉

// 去掉IE input X 和 眼睛图标input::-ms-clear,::-ms-reveal{    display: none;}

2、placeholder在 IE9 以下不兼容

解决：

  可以将下面的代码封装到一个方法或者一个placeholder.js中单独引入。

//   兼容ie9的placeholderfunction isPlaceholder(){    var input = document.createElement('input');    return 'placeholder' in input;}if (!isPlaceholder()) {//不支持placeholder 用jquery来完成    $(document).ready(function() {        if(!isPlaceholder()){            $("input").not("input[type='password']").each(//把input绑定事件 排除password框                    function(){                        if($(this).val()=="" && $(this).attr("placeholder")!=""){                            $(this).val($(this).attr("placeholder"));                            $(this).focus(function(){                                if($(this).val()==$(this).attr("placeholder")) $(this).val("");                            });                            $(this).blur(function(){                                if($(this).val()=="") $(this).val($(this).attr("placeholder"));                            });                        }                    });            //对password框的特殊处理1.创建一个text框 2获取焦点和失去焦点的时候切换            $("input[type='password']").each(                    function() {                        var pwdField    = $(this);                        var pwdVal      = pwdField.attr('placeholder');                        pwdField.after('<input  class="login-input" type="text" value='+pwdVal+' autocomplete="off" />');                        var pwdPlaceholder = $(this).siblings('.login-input');                        pwdPlaceholder.show();                        pwdField.hide();                        pwdPlaceholder.focus(function(){                            pwdPlaceholder.hide();                            pwdField.show();                            pwdField.focus();                        });                        pwdField.blur(function(){                            if(pwdField.val() == '') {                                pwdPlaceholder.show();                                pwdField.hide();                            }                        });                    });        }    });}

看了以下大概是这样的：
1、  对于type = text的input框，是利用jquery添加placeholder属性。
2、  对于type = password的input 框，添加一个input type = text的输入框，为其添加属性placeholder,在对这两个框做隐藏、显示操作。

Chrome

1、去掉谷歌浏览器中表单 input 框中的黄色背景，以及自动填充 user 和 password。

情境：

解决：

1、去掉黄色背景：

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

2、去掉自动填充：假密码框 和 真密码框 区分

<!--添加一样的假input密码框--><input id='passwordTxt' name="userPassword" type="text" class="checkpass required"/><!--真input密码框--><input id='password' name="userPassword" type="password" class="checkpass required" style="display: none" readonly="true"/>

添加一个同样的 input 作默认显示，type 为 text,这样出来的时候就不会有默认填充了。正真的 input 密码框则默认显示 display：none,并且 readonly="true" 设置只读模式。id 需要不同，需要 js 找到对应 dom 作操作。

添加js

$(function() {    //假密码框获得焦点后，调用函数        $("#passwordTxt").on('focus', function () {        //假密码框隐藏            $(this).hide();            //真密码框显示，并且去掉只读，自动获得焦点            $('#password').show().attr('readonly', false).focus();        });    })；