美文网首页
IE8适配的一些神操作(CSS3伪类IE8适配,placehol

IE8适配的一些神操作(CSS3伪类IE8适配,placehol

作者: yuzl | 来源:发表于2018-06-30 10:24 被阅读79次

    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>
    

    相关文章

      网友评论

          本文标题:IE8适配的一些神操作(CSS3伪类IE8适配,placehol

          本文链接:https://www.haomeiwen.com/subject/kdhtuftx.html