IE低版本兼容HTML5 元素

1 JS Hack

<!--[if lt IE 9]> 
<script> 
   (function() {
     if (! 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]-->

2 引入H5 shiv 包

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

另: 需为低版本中没有语义化的元素 初始化样式(可以加入更多)

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

另 : 兼容不使用JS的客户端

<!--[if lte IE 8]> 
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
     </div>
</noscript>
<![endif]-->
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • 所有美好的爱情,总是在激情褪去后有更多疲倦。 有人告诉我,那些该说的话说完了,爱情就只剩下争吵。 或者换句话来理解...
    momowowo阅读 570评论 0 1
  • 不知道你是不是有这样的体验,有个人总是在无意间闯入你的思绪,不是意中人,不是恋人爱人,是父母家人,是许久未见的朋友...
    老班长宫晓阅读 362评论 0 0