zoukankan      html  css  js  c++  java
  • 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览器识别标签,需要新增标签,具体解决办法是:
    IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,代码如下:
    document.createElement(‘新标签’); / /新增创建新标签

    方式一:Coding JavaScript

    将上代码复制到head部分,记住一定要是head部分(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在其他位置调用,否则失效)

    <!--[if lt IE 9]> 
    <script> 
       (function() {
         if (! 
         /*@cc_on!@*/
         0) return;
         var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
         var i= e.length;
         while (i--){
             document.createElement(e[i])
         } 
    })() 
    </script>
    <![endif]-->
    


    方式二:使用Google的html5shiv包(推荐)

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

    当然,你也可以把代码拿出来自己看着办:

    (function(){
    
    if(!/*@cc_on!@*/0) return;
    
    var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;
    
    while(i--){document.createElement(e[i])
    
    }})()

    最后在css里面加上这段:
    /*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
    主要是让这些html5标签成块状,像div那样。

    好了,简单吧,一句话概括就是:引用html5.js  使html5标签成块状.

    --------------------------------

    参考雷锋网的源代码实例:

    image

    <!--[if lte IE 8]>
    <script>
           (function(){var e="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');var i=e.length;while(i--){document.createElement(e[i])}})()
        </script>
    <![endif]-->
    

    <参考:http://blog.csdn.net/ptyzhu/article/details/19477695 & http://www.th7.cn/web/html-css/201404/29228.shtml>

    没有人告诉你,生活会是这样:你工作无趣,你袋里没钱,你的爱情总是昙花一现;妈妈警告过你,会有这样的日子但她没有告诉你,世界将让你屈服。但是,别怕,有我在你身边,谁让我们是friends呢……
  • 相关阅读:
    js可拖拽的div
    hightcharts 3d 堆积图下钻
    绝对炫的3D幻灯片-SLICEBOX
    td在relative模式下,IE9不显示border
    IE9 打不开界面也不报错,只有打开控制台才会显示
    display inline-block 垂直居中
    css实现div的高度填满剩余空间
    g2g c u l8r(训练赛)
    Binarize It(训练赛)
    C. Maximum width(贪心)
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/IE_html5shiv.html
Copyright © 2011-2022 走看看