html5i标签作用,让IE支持HTML5标签 | IInterest

HTML5的特性之一就是新增了语义的标签,比如 header, nav,section,aside, footer,audio,canvas等等.这些标签为设计者提供了更为灵活高效的布局方式.可惜目前的IE是不支持这些标签的…不过还是可以通过一些手段让IE支持部分标签.

先来看看一个HTML5的布局,由于IE无法识别新的语义化标签,所以样式表并没有起作用.

提示：你可以先修改部分代码再运行。

解决的方法就是用js来创建HTML5中新增的标签,因为此代码只提供给IE,所以加上条件注释:

(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])}})()

这时可以看到例子中的样式表生效了,但布局效果却并不是预想的那样(可以对比支持HTML5的浏览器),原因就在于js所创建的元素默认都为行内元素…

所以最后还要为那些结构性的块级标签加上一个样式:

article, aside, dialog, footer, header, section, footer, nav, figure {

display: block;

}

提示：你可以先修改部分代码再运行。

至此IE就可以正常的显示所定义的标签了,但也仅仅是正常显示,类似audio,canvas这些多媒体以及交互式标签的功能是无法实现的.