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

最新推荐文章于 2025-09-13 10:50:15 发布

原创

最新推荐文章于 2025-09-13 10:50:15 发布 · 6.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#ie #谷歌 #浏览器 #兼容性 #默认样式

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

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(){