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

JesusAllen30

于 2017-03-06 11:20:56 发布

阅读量6.4k

点赞数

分类专栏：浏览器兼容文章标签： ie 谷歌浏览器兼容性默认样式

本文链接：https://blog.csdn.net/DOCALLEN/article/details/60573006

版权

本文总结了IE和Chrome浏览器中关于input框的一些兼容性问题及其解决办法。在IE下，针对input[type=text]的X图标和[type=password]的眼睛图标，提供了去除的解决方案；同时，针对IE9以下对placeholder的不兼容，给出了相应的jQuery实现方式。在Chrome中，为了解决表单input框的黄色背景及自动填充问题，提出了使用type=text的input作为默认显示，而真正的password input设置为只读并隐藏的策略。

摘要由CSDN通过智能技术生成

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的placeholder
function 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