HTML5语义化标签兼容IE6~8
2017-01-03 09:19
495 查看
HTML5一些语义化的标签:
这些语义化的标签在IE8版本之前(非标准浏览器)不支持,其他标准浏览器支持。除其他标签都是成对存在的。
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
解决在非标准浏览器下不兼容的问题
一、针对IE6-8这些不支持Html5语义化标签的浏览器我们可以使用JavaScript来解决他们
方法如下:
在页面的头部加下:
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<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(','),
i = e.length;
while(i--){
document.createElement(e[i])}
})()
</script>
<style>
article,aside,dialog,footer,header,section,footer,nav,figure,menu {display:block}
body {
margin: 0;
}
header {
height: 100px;
background: #9F3;
}
article {
padding: 10px;
background: #CF6;
overflow: hidden;
zoom: 1;
position: relative;
}
aside {
width: 200px;
height: 300px;
background: #F06;
position: absolute;
left: 10px;
top: 10px;
}
section {
margin-left: 210px;
background: #F90;
height: 300px;
}
footer {
height: 100px;
background: #C6C;
}
</style>
</head>
<body>
<header>页面头部</header>
<article> <aside>侧边栏</aside>
<section>内容区域</section> </article>
<footer>页面底部</footer>
</body>
</html>
二、可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。
下载地址:http://www.bootcdn.cn/html5shiv/
转自:http://blog.csdn.net/wmaoshu/article/details/51981330
http://www.cnblogs.com/iglass/p/4438171.html
这些语义化的标签在IE8版本之前(非标准浏览器)不支持,其他标准浏览器支持。除其他标签都是成对存在的。
<header> 标签定义文档的页眉(介绍信息)。 <hgroup> 页面上的一个标题组合。 <footer> 页面的底部或者版块底部。 <article> 用来在页面中表示一套结构完整且独立的内容部分。 <section> 页面上的版块,用于划分页面上的不同区域,或者划分文章里不同的节 <nav> 导航 (包含链接的的一个列表) <aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分。 <figure> 用于对元素进行组合。一般用于图片或视频 <figcaption> figure的子元素 用于对figure的内容 进行说明 <time>用来表现时间或日期,有datetime属性。 以下标签具有一些功能: <datalist>选项列表。与 input 元素配合使用,来定义 input 可能的值,要设定input中list属性为datalist 的id。 <details>用于描述文档或文档某个部分的细节,Open 属性默认展开(最好显示的表明open) < summary> details 元素的标题 <dialog>定义一段对话 <address> 定义文章 或页面作者的详细联系信息 <mark> 需要标记的词或句子 <keygen>给表单添加一个公钥 <keygen name="security" /> <progress>定义进度条1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
解决在非标准浏览器下不兼容的问题
一、针对IE6-8这些不支持Html5语义化标签的浏览器我们可以使用JavaScript来解决他们
方法如下:
在页面的头部加下:
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
HTML5语义化标签在IE6-8下,我们用js创建出来之后,他是不会有任何默认样式的甚至是 display,所以在样式表里 要对这些标签定义一下 它默认的display。
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8">
<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(','),
i = e.length;
while(i--){
document.createElement(e[i])}
})()
</script>
<style>
article,aside,dialog,footer,header,section,footer,nav,figure,menu {display:block}
body {
margin: 0;
}
header {
height: 100px;
background: #9F3;
}
article {
padding: 10px;
background: #CF6;
overflow: hidden;
zoom: 1;
position: relative;
}
aside {
width: 200px;
height: 300px;
background: #F06;
position: absolute;
left: 10px;
top: 10px;
}
section {
margin-left: 210px;
background: #F90;
height: 300px;
}
footer {
height: 100px;
background: #C6C;
}
</style>
</head>
<body>
<header>页面头部</header>
<article> <aside>侧边栏</aside>
<section>内容区域</section> </article>
<footer>页面底部</footer>
</body>
</html>
二、可以引用一个js插件解决HTML5语义化标签在IE6-8不兼容问题。
下载地址:http://www.bootcdn.cn/html5shiv/
转自:http://blog.csdn.net/wmaoshu/article/details/51981330
http://www.cnblogs.com/iglass/p/4438171.html
相关文章推荐
- html5 让IE6,7支持HTML5语义化标签的文件
- 【转】如何使html5语义化标签兼容ie
- html5标签兼容ie6,7,8
- HTML5一些语义化的标签以及在IE6~8兼容性问题
- 关于HTML5标签不兼容(IE6~8)
- HTML5 Shiv--解决IE(IE6-IE7-IE8)不兼容HTML5标签的方法
- HTML5 Shiv--解决IE(IE6-IE7-IE8)不兼容HTML5标签的方法
- 使用语义化标签去写你的HTML 兼容IE6,7,8
- 关于HTML5标签不兼容(IE6~8)
- 关于HTML5标签不兼容(IE6~8)
- HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
- HTML5语义化标签综合基础案例
- HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)
- HTML5语义化标签
- 常见的html5语义化标签
- jquery元素分组插件,用于把一连串元素分成多组,如把多个a标签分成多组放入<li>元素中,可以用于简化多图滚动为一个元素滚动,兼容ie6
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- HTML5语义化标签
- html5新增语义化标签