• 转一篇非常好的IE兼容文章兼容IE6\7\8浏览器的html5标签的几个方案


    html5大行其道的时代已经到来。如果你还在等待浏览器兼容,说明你已经与web脱节几条街了。当然,这得益于移动客户端的蓬勃发展。如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天。如果你不信,我只能说:爱信不信!

    下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及)

    复制代码
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312">
    <title>html5</title>
    </head>
    
    <body>
        <header>
            <nav></nav>
        </header>
        <article>
            <section>
                <h2></h2>
                <p></p>
            </section>
        </article>
        
        <footer></footer>
    </body>
    </html>
    复制代码

    html5标签的进步之处当然于它的语义化更直观。当然,这只是html5的进步的九牛之一毛,有人建议说:不要说html5的进步是革命性的,而是发展性的!我不反对此说法,但某方面的确是革命性的。这里不想跑题,我们只说标签。
    当然,兴奋于如此美妙的语义化标签时,不仅仍要追问:IE支持吗?很不幸,答案是否定的。如果你已经被IE搞怕了,你只得继续忍受它无尽的折磨。(IE9和IE10已经兼容支持html5和css3.0)

    不过你要庆幸,你生活的这个时代有很多天才。有人已经帮你把这个问题解决了!虽然,不能称上完美!

    下面我们来看几个解决兼容IE6\7\8不支持html5标签的几个方法:

    1、javascript: document.createElenment("......")

      IE6\7\8不支持的部分原因是,它们不认为footer是一个有效的html标签。那么我们把它“制造”成一个标签不就行了吗?最直接的办法当然是,javascript 的方式创建:document.createElenment("......")!

    复制代码
    (function(){
                var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
                    len=element.length;
                while(len--){
                    document.createElement(element[i])
                }
     })();
    复制代码

    这只是简单创建几典型的html5标签,让它们在IE6\7\8可以成为标签。
    有人已经写了一个完整的js文件,你只需要引入既可,像这样:

    <!--[if lt ie 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    也有写作

    <!--[if lte IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    < ![endif]-->

    html5shiv和html5shim的区别只有"m"和"v",没有其它区别!当然这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that's it."

    这里要做一个特别的说明:就是IE特有的注释判断:

    lte:就是Less than or equal to的简写,也就是小于或等于的意思。

    lt :就是Less than的简写,也就是小于的意思。

    gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

    gt :就是Greater than的简写,也就是大于的意思。

    ! : 就是不等于的意思,跟javascript里的不等于判断符相同

    因为IE9虽然支持html5标签,但支持的不是很完整,所以,也可以写"lte",这取决于你的选择!

    当然,不要忘了指定新建标签的display属性,大多情况下我希望标签是block的:

    header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

     2、嵌套标签的方法

    其实说白了就是在,语义化的html5标签内嵌套div等可用标签,然后只给div写样式,我是不赞成这样的写法的。这样做还不如,给标签一个有语义化的id或者class!

    复制代码
    <!--[if lt IE 9]>
    <style>
    body > * .section {
        color: #ff0;
    }
    </style>
    <![endif]-->
    <style>
    section .section {    color: #f00;
    }
    </style>
    <section><div class="section">内容测试...</div></section>
    复制代码

    但如果类似于这样的结构,用用也无防:

    复制代码
    <nav >
            <ul class="test">
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </nav>
    复制代码


    3、IE条件注释

    复制代码
    <!--[if lt IE 9]><div class="section"><![endif]-->
    <!--[if IE 9]><section class="section"><![endif]-->
    <!--[if !IE]><!--><section class="section"><!--<![endif]-->
        ......
    <!--[if lt IE 9]></div><![endif]-->
    <!--[if IE 9]></section><![endif]-->
    <!--[if !IE]><!--></section><!--<![endif]-->
    复制代码

    再看一遍IE特有的注释判断:

    lte:就是Less than or equal to的简写,也就是小于或等于的意思。

    lt :就是Less than的简写,也就是小于的意思。

    gte:就是Greater than or equal to的简写,也就是大于或等于的意思。

    gt :就是Greater than的简写,也就是大于的意思。

    ! : 就是不等于的意思,跟javascript里的不等于判断符相同

    相信大家都明白,这是怎么回事!这是一个更加蛋疼的办法!大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。

    4、使用xmlns定义文档的命我空间

    xmlns即是XHTML namespace的缩写,也就是所谓的“命名空间”。与DOCTYPE声明一样,xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是,在HTML文档是不存在xmlns的,我们平常所见到的xmlns都是出现在XHTML文档中的。

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 

    这是xhtml原有的命名空间,到了html5以后被简化了,。

    <html lang="en">

    来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间,并使用了含有namespace前缀的元素,例如:

    复制代码
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
    <body>
     <html5:section>
     <!-- content -->
     </html5:section>
    </body>
    </html>
    复制代码

    :html5这个前缀并不是一个标准的写法,你也可以用其它字符代替:hl5也是可以的。有了前缀之后,IE会识别新的元素,从而可以应用样式。在其他浏览器中一样有效,那么最后,你就成功地在各个浏览器中构建了一样的元素和一样的样式。

    这个方法很明显有个缺陷:你必须在HTML文档中使用XML格式的命名空间,同样,你也需要在css中这么做:

    html5\:section {
     display: block;
    }

    那么对js的兼容性如何呢?下面是个测试demo

    复制代码
    <!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
    <head>
    <title>;html5</title>
    <meta charset="gb2312">
    <style>
        html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; }
    </style>
    <script>
      window.onload = function(){
         alert(document.getElementById("test").innerHTML + "---id")
         alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName")
         alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写")
      }
    </script>
    </head>
    <body>
        <html5:section id="test">内容</html5:section>
    </body>
    </html>
    复制代码

    测试结果,IE6\7\8均测试通过,但fixfox和chrome里只有id能获取到,所以这种方法同样不是一个可取的方法!

  • 相关阅读:
    httpcontext in asp.net unit test
    initialize or clean up your unittest within .net unit test
    Load a script file in sencha, supports both asynchronous and synchronous approaches
    classes system in sencha touch
    ASP.NET MVC got 405 error on HTTP DELETE request
    how to run demo city bars using sencha architect
    sencha touch mvc
    sencha touch json store
    sencha touch jsonp
    51Nod 1344:走格子(贪心)
  • 原文地址:https://www.cnblogs.com/chu888chu888/p/2851725.html
Copyright © 2020-2023  润新知