最近写项目要求兼容到ie8,写完了去ie测试的时候,发现了placeholder在ie下的兼容问题,为了解决,搜罗网上各种牛人的解决方案,自己总结如下:

css样式(设置各浏览器下placeholder的样式问题):

//谷歌浏览器

input::-webkit-input-placeholder{
 font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
 font-size:14px;
 color:#ccc;
}

//火狐4-18使用伪类
input::-moz-placeholder{
 font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
 font-size:14px;
 color:#ccc;
}

//火狐19+使用伪元素
input:-moz-placeholder{
 font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
 font-size:14px;
 color:#ccc;
}

//IE10使用伪类 
input::-ms-input-placeholder{
 font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB",  STHeiti, 华文细黑,"PingFang SC";
 font-size:14px;
 color:#ccc;
}

js代码(判断是否支持placeholder)

if( !('placeholder' in document.createElement('input')) ){     
       $('input[placeholder],textarea[placeholder]').each(function(){  
         var that = $(this),  
         text= that.attr('placeholder');  
         if(that.val()===""){  
           that.val(text).addClass('placeholder');  
         }  
         that.focus(function(){  
           if(that.val()===text){  
             that.val("").removeClass('placeholder');  
           }  
         })  
         .blur(function(){  
           if(that.val()===""){  
             that.val(text).addClass('placeholder');  
           }  
         })  
         .closest('form').submit(function(){  
           if(that.val() === text){  
             that.val('');  
           }  
         });  
       });  
     }

在input输入数字后,会出现黄色的背景,解决代码如下:

nput:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
       -webkit-box-shadow: 0 0 0 1000px white inset;
}
 input[type=text]:focus, input[type=password]:focus, textarea:focus {
      -webkit-box-shadow: 0 0 0 1000px white inset;
}

placeholder在IE下的兼容问题的更多相关文章

  1. input的placeholder在ie9下不兼容的结局办法。

      /*      IE9placeholder支持      */     if(!placeholderSupport()){   // 判断浏览器是否支持 placeholder         ...

  2. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  3. html5的placeholder属性(IE如何兼容placeholder属性)

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  4. 解决360、猎豹浏览器等极速模式下css3兼容问题

    有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...

  5. 0c-42-ARC模式下如何兼容非ARC的类

    1.ARC模式下如何兼容非ARC的类 让程序兼容ARC和非ARC部分.转变为非ARC -fno-objc-arc 2.将MRC转换为ARC ARC也需要考虑循环引用问题:一端用strong,一端用we ...

  6. input 光标在 chrome下不兼容 解决方案

    input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...

  7. [转]FireFox与IE 下js兼容触发click事件的代码

    本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...

  8. 1.ARC模式下如何兼容非ARC的类

    ARC模式下如何兼容非ARC的类 :转变为ARC的, -f-objc-arc 非ARC模式下如何兼容ARC的类 :转变为非ARC -fno-objc-arc

  9. ie下不支持placeholder 用jquery来完成兼容

    这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助.最近在做的项目placeholder不兼容ie,这个可以兼容IE的输入框的HTML新增的placeholder的显示下面是代码:$( do ...

随机推荐

  1. 换根dp

    感觉这类问题很少?算了,还是拿出来水一下吧qwq... 首先来看一道例题:POJ3585 一句话题意:树上任意源点多汇点最大流 你看这不就是个最大流的板子题吗?我先建个图,然后跑最大流,然后,,,然后 ...

  2. Ajax请求传递数组参数的方法

    方法一:拼接字符串参数 var arr={params:['param','param2']}; $.ajax({url:请求地址, data:arr, type:"POST", ...

  3. 公告上下滚动基于Jquery

    前提  需要引入jquery  如果你用的单位不是px  修改的同时红色部分需保持一致 <!DOCTYPE html> <html> <head> <meta ...

  4. C++ 内存映射

    HANDLE hFile = NULL;HANDLE hFileMap = NULL;const viewmapsize = 8 * 1024 * 1024;//8mDWORD highsize,lo ...

  5. 项目版本回退后出现java compiler level does not match the version of the installed java project facet错误的解决

    今天项目出问题了,采取了项目版本回退的方法解决了代码不能够下拉和上送的问题以后,出现如下错误,项目是微服务的,更新相关的依赖项目,仍得不到解决,检查mapper.xml文件亦没问题.然后在控制台那块发 ...

  6. SpringBoot 系列教程之事务不生效的几种 case

    SpringBoot 系列教程之事务不生效的几种 case 前面几篇博文介绍了声明式事务@Transactional的使用姿势,只知道正确的使用姿势可能还不够,还得知道什么场景下不生效,避免采坑.本文 ...

  7. [Python3] RSA的加解密和签名/验签实现 -- 使用pycrytodome

    Crypto 包介绍: pycrypto,pycrytodome 和 crypto 是一个东西,crypto 在 python 上面的名字是 pycrypto 它是一个第三方库,但是已经停止更新,所以 ...

  8. CentOS7.7安装python3.8.2与pip20

    1.安装第三方库 # yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-deve ...

  9. mysql 中两个日期相减获得 天 小时 分钟 或者 小时:分钟的格式

    /**有一个需求,要求获得两个日期想减的天数,小时数,分钟数.通过查找资料,于是乎我写出了如下代码,来获得两个字段.*/ IFNULL(CONCAT( ,'-',''), ),),'天')), ),) ...

  10. CPU的成本构成

    1)设计成本: 工程师的工资,EDA等开发工具的费用.设备费用.场地费用等等. 2)硬件成本: 硬件成本=(晶片成本+掩膜成本+封装.测试成本)/成品率 1.晶片成本 一片硅晶圆 晶片成本=晶圆成本/ ...