html5 shiv
使用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相关推荐
- HTML5 Shiv #8211; 让该死的IE系列支持HTML5吧
下面是引用Google的html5.js文件,好处就不说了: <!--[if IE]><script src="http://html5shiv.googlecode.co ...
- 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 ...
- Modernizr:HTML5和CSS3的开发利器
2019独角兽企业重金招聘Python工程师标准>>> 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些 ...
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- 你必须知道的28个HTML5特征、窍门和技术
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1058 原文地址:h ...
- HTML5 新元素标签系列:最简版 HTML5
我们不讨论为什么我们现在就可以用 HTML5 而不是等到2022,这篇文章将给你提供一系列 HTML样板,你现在就可以把他们应用在你的项目中. 五秒内开始用 HTML5 是你页面的标志符合 HTM ...
- 《HTML5与CSS3实战指南》——2.2 基本的HTML5模板
本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.2节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...
- 下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
- HTML5新特征、窍门和技术(11~15)
接上一篇,我们继续学习... 十一.IE和HTML5(Internet Explorer and HTML5) 不幸的是,讨厌的IE浏览器需要动点小手术才能理解新的HTML5元素. 所有元素,默认的, ...
- 如何使用HTML5创建在线精美简历
译自:http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-an-html5-microdata-powered-re ...
最新文章
- 使用Canu对三代测序进行基因组组装
- 【收藏】mydockfinder下载地址
- 批量文件替换_让你效率翻倍的15个Word批量操作小技巧
- 【Spring笔记】c空间和p命名空间注入
- 2015年,我们一起经历的IT安全事件
- 全国自然保护区生态功能区分布数据
- springboot 整合 shiro (Web Applications)避坑一 ,请看shiro官网
- 互联网的三大巨头 百度 阿里巴巴 腾讯(BAT)
- windows 版本 Appium 环境搭建
- 两种重要的数据【逻辑数据模型,概念数据模型】
- 深入浅出Embedding
- 使用 customize-cra 修改 webpack 配置
- java查找_用Java如何实现搜索功能?
- 浙大160位学者入选2020“中国高被引学者” 榜单!
- gel文件的作用——摘自百度
- Android应用程序资源的编译和打包过程分析
- c++找出1000以内的完数
- [iOS]-工厂设计模式
- matlab simca,SIMCA-P+软件
- tomcat压缩配置