使用html5标签吧!
ie6、ie7、ie8不支持怎么办?
它的原理是如此的简单:
    1、document.createElement("ele");  // js虚拟创建一个元素,而不必添加到文档中
    2、ele {display:block;}            // css设定它为一个块状元素

//<!--[if lt IE 9]><script>  js code goes here to compat for ie6`8 <\/script><![endif]-->
(function(doc) {var e = ("article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section,time,audio,video,canvas,mark,template").split(","),i=e.length;while (i--) {doc.createElement(e[i]);}
})(document);

/*add the css here*/article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section,audio,video,canvas{display:block}mark{background:#FF0;color:#000}template{display:none}

附录 html5shiv.js

/*HTML5 Shiv v3.7.0 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed*/(function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/[\w\-]+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x<style>article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}</style>";
c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="<xyz></xyz>";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:"3.7.0",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d<h;d++)c.createElement(e[d]);return c}};l.html5=e;q(f)})(this,document);

View Code

转载于:https://www.cnblogs.com/xiankui/p/3783282.html

html5 shiv相关推荐

  1. HTML5 Shiv #8211; 让该死的IE系列支持HTML5吧

    下面是引用Google的html5.js文件,好处就不说了: <!--[if IE]><script src="http://html5shiv.googlecode.co ...

  2. 28个HTML5特征、窍门和技术

    原文地址:  http://www.zhangxinxu.com/wordpress/2010/08/%E7%BF%BB%E8%AF%91-%E4%BD%A0%E5%BF%85%E9%A1%BB%E7 ...

  3. Modernizr:HTML5和CSS3的开发利器

    2019独角兽企业重金招聘Python工程师标准>>> 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些 ...

  4. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  5. 你必须知道的28个HTML5特征、窍门和技术

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 原文地址:h ...

  6. HTML5 新元素标签系列:最简版 HTML5

    我们不讨论为什么我们现在就可以用 HTML5 而不是等到2022,这篇文章将给你提供一系列 HTML样板,你现在就可以把他们应用在你的项目中.   五秒内开始用 HTML5 是你页面的标志符合 HTM ...

  7. 《HTML5与CSS3实战指南》——2.2 基本的HTML5模板

    本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.2节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...

  8. 下列不属于html5语义元素,HTML5 新的语义元素

    HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...

  9. HTML5新特征、窍门和技术(11~15)

    接上一篇,我们继续学习... 十一.IE和HTML5(Internet Explorer and HTML5) 不幸的是,讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素. 所有元素,默认的, ...

  10. 如何使用HTML5创建在线精美简历

    译自:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-re ...

最新文章

  1. 使用Canu对三代测序进行基因组组装
  2. 【收藏】mydockfinder下载地址
  3. 批量文件替换_让你效率翻倍的15个Word批量操作小技巧
  4. 【Spring笔记】c空间和p命名空间注入
  5. 2015年,我们一起经历的IT安全事件
  6. 全国自然保护区生态功能区分布数据
  7. springboot 整合 shiro (Web Applications)避坑一 ,请看shiro官网
  8. 互联网的三大巨头 百度 阿里巴巴 腾讯(BAT)
  9. windows 版本 Appium 环境搭建
  10. 两种重要的数据【逻辑数据模型,概念数据模型】
  11. 深入浅出Embedding
  12. 使用 customize-cra 修改 webpack 配置
  13. java查找_用Java如何实现搜索功能?
  14. 浙大160位学者入选2020“中国高被引学者” 榜单!
  15. gel文件的作用——摘自百度
  16. Android应用程序资源的编译和打包过程分析
  17. c++找出1000以内的完数
  18. [iOS]-工厂设计模式
  19. matlab simca,SIMCA-P+软件
  20. tomcat压缩配置

热门文章

  1. 上海旅行日志 2012年7月14日
  2. SIM-MICRO-SIM- NANO SIM 区别
  3. Fedora 9 感受
  4. MIPS中lw指令运行时间最长
  5. 如何下载 MMS开头的视频资源
  6. 下行物理信道rs_LTE下行物理信道与物理信号
  7. 中国英语学习论坛(2:考 研 英 语 资 料 索 引)
  8. 一文告诉你什么是领域驱动设计?
  9. 超酷!极通EWEBS竟然不需微软终端服务支持
  10. al换脸一键生成_使用al生成详细的课程计划