zoukankan      html  css  js  c++  java
  • html5标签兼容ie6,7,8

    注册博客园已经三年了,这三年一直在忙,没时间写博文。也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员。

    是时候对所学的,所用的知识做一下沉淀了。就从这一篇开始吧!

    html5标签兼容ie6,ie7,ie8

    先来看下面的代码:

     1 <html>
     2 <head>
     3     <title>study canvas</title>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
     6     <!--[if lte IE 8]>
     7     <script type="text/javascript">
     8         (function(){
     9             var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
    10             for(var i = 0; i < html5elmeents.length; i++){
    11                 document.createElement(html5elmeents[i]);
    12             }
    13         })();
    14     </script>
    15     <![endif]-->
    16 
    17     <style type="text/css">
    18 
    19       .box .art{
    20           width:300px;
    21           height: 200px;
    22           background: #cd5c5c;
    23       }
    24       /*
    25       .box article{
    26           300px;
    27           height: 200px;
    28           background:green;
    29       }
    30       */
    31     .summary{
    32         background: #ddd;
    33         margin-top: 20px;
    34         padding: 20px;
    35     }
    36     </style>
    37 </head>
    38 <body>
    39 <div id="box" class="box">
    40     <article class="art">
    41     文章主体
    42     </article>
    43     <section class="section">
    44         边栏
    45     </section>
    46 
    47 </div>
    48 <div class="summary">
    49     总结:
    50     html5的标签,在ie6,ie7,ie8下:
    51     1.使用样式不起作用,无论是article,还是.article<br/>
    52     2.使用原生的js也不起作用<br/>
    53     3.加入上面的一段js,样式和原生js都可用<br/>
    54 
    55     ps:用kissy时可以用,可能是kissy做了兼容处理<br/>
    56 </div>
    57 
    58 <script type="text/javascript">
    59    var box = document.getElementById('box');
    60    var art = box.getElementsByTagName('article')[0];
    61    art.innerHTML = 'i love you';
    62 
    63 (function(S){
    64     var sect = S.all('#box').all('section');
    65     sect.html('最好');
    66 
    67 })(KISSY);
    68 </script>
    69 </body>
    70 </html>

    总结:
    html5的标签,在ie6,ie7,ie8下:
    1.使用样式不起作用,无论是article,还是.article

    2.使用原生的js也不起作用

    3.加入上面的一段js,样式和原生js都可用

    ps:用kissy时可以用,可能是kissy做了兼容处理

  • 相关阅读:
    Ubuntu Server下docker实战 02: docker进阶配置
    Ubuntu Server下docker实战 01: 安装docker
    简单一个方法实现商品组合管理--递归笛卡尔
    Little-Endian小字节序
    BinaryWriter和BinaryReader用法
    C#位运算
    TCP协议三次握手过程分析
    简述HTTP过程
    c# 版贪食蛇
    今日头条列表json
  • 原文地址:https://www.cnblogs.com/summer_shao/p/html5.html
Copyright © 2011-2022 走看看