HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。
HTML5的新标签元素有:
- <header>定义页面或区段的头部;
- <footer>定义页面或区段的尾部;
- <nav>定义页面或区段的导航区域;
- <section>页面的逻辑区域或内容组合;
- <article>定义正文或一篇完整的内容;
- <aside>定义补充或相关内容;
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。
方式一:Coding JavaScript
<!--[if lt IE9]> <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 IE9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![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标签设计的界面。
相关推荐
完美解决IE(IE6/IE7/IE8)不兼容HTML5
主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下
ie6 ie7 ff浏览器兼容 border:2px solid #00f; /*IE、ff的属性*/ border:2px solid #090\9; /* IE6/7/8的属性 */ border:2px solid #F90\0; /* IE8支持 */ *border:2px solid #F00; /* IE6、7支持 */ _border:2...
jquery.validate 兼容IE6/IE7/IE8
ie6/7/8也能兼容html5了。怎么样,很厉害吧?赶紧下载试试。
使IE5,IE6,IE7,IE8兼容到IE9模式 <!–[if lt IE 9]> ”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script> <![endif]–> 解决PNG显示问题 只需将透明png图片命名为*-trans.png 需要注意...
让IE兼容 HTML5的canvas标签 excanvas的文件
CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK.
省市县选择器,支持 ie6/7/8 和火狐
IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决IE兼容性解决
下拉框支持主流浏览器,兼容IE5/6/7/8/9/10,不兼容Edge 下拉框有模糊搜索功能 下拉框的值有两个,text、data_id 代码是基于jquery的,版本使用的:
html5新标签兼容IE,解决IE低版本浏览器不兼容html5新标签
在网站开发中不免因为各种兼容问题苦恼,针对兼容问题,其实IE给出了解决方案Google也给出了解决方案 百度也应用了这种方案去解决IE的兼容问题 百度源代码如下 1 <!Doctype html> 2 <...
CSS完美兼容IE6IE7FF的通用方法
IE6不兼容png透明背景解决方法,有效解决IE6下 透明图片浅灰背景的问题
兼容 IE6、IE7、IE8 样式 不兼容 兼容 txt
IE7,IE8兼容H5标签,文档包含JS以及使用说明
IE8以上兼容语义化化标签的工具js文件,配合我的博客一起使用https://blog.csdn.net/u010853130/article/details/80076905
这是一个对IE8及以下做前端兼容的文件工具...--对于ie6到ie8做兼容,兼容h5,css3等新特性--> <!--[if (gte IE 6)&(lte IE 8)]> [removed][removed] [removed][removed] [removed][removed] <![endif]-->