HTML5标签不兼容ie怎么办?

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

比较常用的HTML5的新标签元素有:

<header>定义页面或区段的头部;
<nav>定义页面或区段的导航区域;
<section>页面的逻辑区域或内容组合;
<article>定义正文或一篇完整的内容;
<aside>定义补充或相关内容;
<footer>定义页面或区段的尾部;
使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。

方法一:通过Javascript创建元素 document.createElenment(“……”)

在<head>….</head>中添加如下代码:

<!--[if lt IE 9]>
<script type="text/javascript">
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]-->

方法二:使用Google的html5shiv包(推荐)

<!--[if lt IE 9]>
<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 lt IE 8]>
<noscript>
<style>{@[email protected]}</style>
<div class="ie-noscript-warning">您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.
</div>
</noscript>
<![endif]-->

时间: 2024-10-25 08:03:12

HTML5标签不兼容ie怎么办?的相关文章

HTML5 Shiv--解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局.大多数浏览器基本兼容html5,但目前来说ie6/ie7/ie8还不兼容html5标签,所以需要javascript处理,让其进行兼容 方法一:javascript code <!--[if lt IE9]> <script> (function() { if (!/*@[email protected]*/0) return; var e = "abbr, article, aside, a

html5shiv让IE也能支持HTML5标签的JavaScript兼容库

使用方法 作者已经把这段代码放到了Google code project上,不过由于Google的原因不能访问了,只需要在你的head标签中中调用这段代码就行. <!–if lt IE 9]> <script src="js/html5shiv.js"></script> <!–endif]–> 当然你也可以直接把这个文件下载到自己的网站上.这个文件必须在head标签中调用,因为IE必须在元素解析这前知道这些元素,才能启作用!或许你还要在

【html5】解决HTML5新标签不兼容的问题

html5标签: 1.语义化好 -> SEO a). 程序交流方便 b). 搜索引擎友好 baidu -> 不认识 google 2.本身不兼容,想兼容低版本,请使用如下方法: 方式一:使用Google的html5shiv包(推荐)<!--[if lt IE9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--

兼容IE6\7\8浏览器的html5标签的几个方案

html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几个嘴巴,然后,苦学吧!因为前端的春天已经到来,而且不止一个春天.如果你不信,我只能说:爱信不信! 下面我们来看一个标准的html5标签结构:(我这里只是说标签,其它概不涉及) <!DOCTYPE HTML> <html> <head> <meta charset=&q

解决HTML5标签兼容的办法搜集

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

文章转载自:爱思资源网http://www.aseoe.com/show-10-701-1.html 导语 HTML5新标签在IE6 IE7 IE8上并不能识别,需要进行JavaScript处理.以下就介绍几种方式.方式一:Coding JavaScript<!--[ifltIE9]><script>(function(){if(! *@[email protected]* 0)return;vare="abbr,article,aside,audi HTML5新标签在I

完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码

【hack】ie8如何兼容html5标签

ie8是识别不了html5语义化标签的,解决方法: 在头部文件的<head></head>里面下如下代码    (这段代码的意思是如果ie版本低于ie8,就创建所有HTML5新标签) <!--[if lt IE9]> <script> (function() { if (! /*@[email protected]*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist

HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. HTML5的新标签元素有: <header>定义页面或区段的头部: <footer>定义页面或区段的尾部: <nav>定义页面或区段的导航区域: <section>页面的逻辑区域或内容组合: <article>定义正文或一篇完整的内容: <aside>定义补充或相关内容: 使用他们能让代码