成都网站建设设计

将想法与焦点和您一起共享

html5兼容标签,处理html5标签兼容性

html5标签不兼容怎么办?

去百度搜搜pie.js和pie.css,先了解这两个文件的用法,知道怎么用后可以支持大部分的h5标签和css的样式属性,极大支持了678不支持的问题

创新互联为企业级客户提高一站式互联网+设计服务,主要包括成都做网站、成都网站制作、成都app软件开发公司、小程序开发、宣传片制作、LOGO设计等,帮助客户快速提升营销能力和企业形象,创新互联各部门都有经验丰富的经验,可以确保每一个作品的质量和创作周期,同时每年都有很多新员工加入,为我们带来大量新的创意。 

如何让ie浏览器支持html5标签

让ie浏览器支持html5标签

HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML5标签。自己最近在写响应式布局的范例,里面也使用到了header等标签。还是比较希望能够做成兼容“旧版浏览器”的,在此和大家共享一下,如何让旧浏览器支持HTML5新增标签。

HTML5 新标签兼容旧版本浏览器的方法

html5有哪些新特性,移除了那些元素?如何处理html5新标签的浏览器兼容问题?

h5新特性:

语义化标签:hrader/header 、footer/footer、nav/nav、section/section、article/article、aside/aside、video/video、audio/audio

新增表单元素:email、month、number、range、search、tel、url、week、time、date、datatime、datetime-local

新增表单属性:placeholder、required、autofocus、autocomplete、maxlength、novalidate、max、min、step、multipe、disabled、checked

新增的视频和音频标签:video/video、audio/audio

canvas绘图

SVG绘图

拖拽

WebWorker、WebStorage、WebSocket

h5新标签的兼容问题:

(1)IE8/IE7/IE6支持通过 document.createElement

(2)将html5shiv.js引入到head中(IE9及以下)

!--[if lt IE9]script src="dist/html5shiv.js"/script![endif]--

载入后,初始化新标签的CSS:

/*html5*/ article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

如何区分html和html5:

(1)在文档类型声明上,h5为!DOCTYPE html,之前版本比较长

(2)h5有语义化标签,如header/header

如何处理html5新标签的浏览器兼容性问题

HTML5已形成了最终的标准,概括来讲,它主要是关于图像,位置,存储,多任务等功能的增加。

新增的元素有绘画 canvas ,用于媒介回放的 video 和 audio 元素,本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失,而sessionStorage的数据在浏览器关闭后自动删除,此外,还新增了以下的几大类元素。

内容元素,article、footer、header、nav、section。

表单控件,calendar、date、time、email、url、search。

控件元素,webworker, websockt, Geolocation。

移出的元素有下列这些:

显现层元素:basefont,big,center,font, s,strike,tt,u。

性能较差元素:frame,frameset,noframes。

如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

处理兼容问题有两种方式:

1.IE8/IE7/IE6支持通过document.方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。

2.使用是html5shim框架

另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

如何处理html5新标签的浏览器兼容问题

对于结构类的标签,通过JS来实现兼容

header footer等结构类标签,在不支持的浏览器当中,都属于“用户自定义标签”,虽然会显示,但是会以行内元素的样式展示。此时需要利用JS创建这个元素,之后用CSS为其设置块元素的样式。

如下代码

head

!-- 其他无关代码已经省略 --

script

document.createElement('header');

document.createElement('footer');

/script

style

header, footer {

display: block;

}

/style

/head

body

header此处该标签就成立了,也是以块元素形式展示/header

footerHTML5 学堂 ,多篇原创技术文章/footer

/body

注意,JS代码需要放置在顶部(head当中),而不是底部

如何让IE8浏览器兼容新的HTML5元素

HTML5的新增结构标签包括headerfooter等,在IE8-浏览器当中,需要借助JavaScript以及CSS来实现兼容。具体代码如下:

CSS代码

style

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{

display: block;

}

/style

JS代码(原生JavaScript,如下示范代码当中只包含4种新标签,其他新增结构标签同理)

script

document.createElement('header');

document.createElement('nav');

document.createElement('article');

document.createElement('footer');

/script

对于其他HTML5新增标签,不能够实现兼容问题。

资料来源:HTML5学堂(码匠) - HTML5 新标签兼容旧版本浏览器的方法


标题名称:html5兼容标签,处理html5标签兼容性
本文路径:http://chengdu.cdxwcx.cn/article/dsgpepi.html