IE8适配的一些神操作(CSS3伪类IE8适配,placeholder兼容IE8)解决方案

1、CSS3伪类 IE8适配

原因IE8不支持的部分css3属性,不支持css3伪类

举例:input:checked

解决方案:Selectivizr

Selectivizr是一个JS文件,引入此JS文件即可解决css3伪类无效问题。示例代码:

// JS library即为JS框架,比如jQuery
<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
  <script type="text/javascript" src="selectivizr.js"></script>
<![endif]-->

解释:
1、使用Selectivizr前需要先加载下列框架中的任何一个:JQuery、dojo、prototype、Yahoo YUI、DOMAssistant、mootools、NVMatcher

2010-09-14_225522.png

2、placeholder兼容IE8

原因:placeholder是h5的新属性,IE10以前的浏览器(8、9)不支持此属性。

解决方法:jQuery三方插件 jquery-placeholder

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <!--[if lte IE 9]>
     <script src="../../js/jquery/jquery.placeholder.min.js"></script>
     <script>
        $(function(){
            $('input[placeholder]').placeholder();
        });
     </script>
    <![endif]-->
</head>
<style type="text/css">
    input{
        width: 100px;
        height: 50px;
        border: 1px solid red;
    }
    .placeholder {
        color: #ccc;
    }
</style>
<body>
<input type="text" placeholder="dfdsfdsfad"/>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前端开发知识点 HTML&CSS对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型...
    Hebborn_hb阅读 857评论 0 1
  • 本文转载自:众成翻译译者:为之漫笔链接:http://www.zcfy.cc/article/239原文:http...
    极乐君阅读 7,429评论 1 62
  • 新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 ...
    祈澈菇凉阅读 2,367评论 2 29
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,800评论 1 13
  • 今天想说说唇上之歌这部电影,之前在回家的高铁上无事可做,发现手机还有缓存的gakki电影没有看,就花了两个小时观看...
    opensouth阅读 266评论 0 2