100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > HTML5语义化标签兼容IE6~8

HTML5语义化标签兼容IE6~8

时间:2019-07-14 12:56:10

相关推荐

HTML5语义化标签兼容IE6~8

HTML5一些语义化的标签:

这些语义化的标签在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>定义进度条1234567891011121314151617181912345678910111213141516171819

解决在非标准浏览器下不兼容的问题

一、针对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不兼容问题。

下载地址:/html5shiv/

转自:/wmaoshu/article/details/51981330

/iglass/p/4438171.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。