恶心的兼容题目：圆满处理IE(IE6/IE7/IE8)不兼容HTML5标签的题目

2024年5月30日 165次阅读 来源: hover_lew

HTML5的语义化标签以及属性，能够让开发者异常轻易地完成清楚的web页面规划，加上CSS3的结果衬着，疾速竖立雄厚天真的web页面显得异常简朴。

<header>定义页面或区段的头部；
<footer>定义页面或区段的尾部；
<nav>定义页面或区段的导航地区；
<section>页面的逻辑地区或内容组合；
<article>定义正文或一篇完全的内容；
<aside>定义补充或相关内容；

运用他们能让代码语义化更直观,而且更轻易SEO优化。然则此HTML5新标签在IE6/IE7/IE8上并不能辨认，须要举行JavaScript处置惩罚。以下就引见几种体式格局。

体式格局一：Coding JavaScript

<!--[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]-->

假如是IE9以下的IE浏览器将建立HTML5标签， 如许非IE浏览器就会无视这段代码，也就不会有无谓的http要求了。

第二种要领：运用Google的html5shiv包（引荐）

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--
这个内容是我附加的：
<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
主假如忧郁，假如这两个cdn失效了，能够互相替代尝尝
-->
<![endif]-->

然则不论运用以上哪一种要领,都要初始化新标签的CSS.由于HTML5在默许状况下表现为内联元素，对这些元素举行规划我们须要应用CSS手工把它们转为块状元素轻易规划

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

然则假如ie6/7/8 禁用剧本的用户,那末就变成了无款式的”白板”网页,我们该怎样处理呢?
我们能够参照facebook的做法，即指导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替代 html5 标签，这要比为了坚持兼容性而写大批 hack 的做法更轻巧一些。

<!--[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]-->

如许能够指导用户开启剧本,或许直接跳转到HTML4标签设想的界面。
文章来自：http://www.cnblogs.com/Capric…

    原文作者：hover_lew
    原文地址: https://segmentfault.com/a/1190000006546647
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞