html5兼容ie8,网页兼容ie8

ie8支持html5吗

自HTML5标准的提出就得到非常多的关注,而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题,上周微软在技术大会上就表示目前微软正在开发的IE9将更加支持HTML5标准,但对于IE9是否将完全支持HTML5所有的标准,微软却表现的有点含糊其辞。HTML5标准能为网页带来更高效更洁净的代码,只有微软参与HTML5的设计工作,才能让IE浏览器识别更多的新元素。

站在用户的角度思考问题,与客户深入沟通,找到玉泉街道网站设计与玉泉街道网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计制作、做网站、企业官网、英文网站、手机端网站、网站推广、域名注册虚拟主机、企业邮箱。业务覆盖玉泉街道地区。

HTML5标准预计是在2022年向全世界发布,虽然目前距他发布的日期还有3年左右的时间,但是我认为它距离我们并不是那么遥远,目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面,苹果、Google、Opera和Mozilla等知名的浏览器厂商都表现的比较积极,微软现在也开始付出行动了,从上周微软在技术大会公布的IE9细节来看,微软将采取一种谨慎的态度涉足网页标准。微软也曾表示:IE浏览器将以标准HTML5为核心。但是微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。

上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。

这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。

以下是html5的js文件中的代码:

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

除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。

IE开发经理艾德里安巴特曼(Adrian Bateman )就曾表示,IE团队希望分享自己对HTML5的看法,并参与制定该标准的讨论。巴特曼表示,尽管目前IE团队更多是提出问题,而非给出解决办法,但是公开讨论正是推动HTML5发展的最佳方式。相信无论IE浏览器是否能够继续支持HTML5标准,HTML5标准在全球广泛的使用已经是大势所趋。

ie8如何支持html5

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

HTML5的新标签元素有:

header定义页面或区段的头部;

footer定义页面或区段的尾部;

nav定义页面或区段的导航区域;

section页面的逻辑区域或内容组合;

article定义正文或一篇完整的内容;

aside定义补充或相关内容;

使用他们能让代码语义化更直观,而且更方便SEO优化。但是此HTML5新标签在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。以下就介绍几种方式。

方式一:Coding JavaScript

!--[if lt IE9]

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(', ');

var i= e.length;

while (i--){

document.createElement(e[i])

}

})()

/script

![endif]--

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

!--[if lt IE9]

![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 lte IE 8]

noscript

style.html5-wrappers{display:none!important;}/style

div class="ie-noscript-warning"您的浏览器禁用了脚本,请a href=""查看这里/a来启用脚本!或者a href="/?noscript=1"继续访问/a.

/div

/noscript

![endif]--

这样可以引导用户开启脚本,或者直接跳转到HTML4标签设计的界面。

如何让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制作网页,怎么让IE8兼容html5

itjob老师教过为了方便兼容IE8中使用HTML5,可以使用JS的方法来使低于IE9版本的IE浏览器兼容。

!--[if lt IE 9]

script

(function(){

var tags = ['header','footer','figure','figcaption','details','summary','hgroup','nav','aside','article','section','mark','abbr','meter','output','progress','time','video','audio','canvas','dialog'];

for(var i=tags.length - 1;i-1;i--){ document.createElement(tags[i]);}

})();

/script

![endif]--

第二种方法:使用Google的html5shiv包

html5uploader.js 怎么兼容ie8

html5uploader.js 兼容ie8方法如下:

拥有两个插件,一个是flash版本的uploadify,免费的。另一个是自己写的html5版本的,名叫html5uploader(好俗的名字。。),再加一个适配器uploadadapter,用来决定在什么时候调用哪个插件。页面中只调用uploadadapter。关键的难题就在于,页面中的代码是只写一次的,不管是flash的还是html5的都得能识别出页面上的参数,这也就是我的山寨版本的插件做的事情,原flash版本的配置参数通通得识别并有效。幸好,已经实现了。

上demo

很多东西,一上demo就都清楚了。。。

[html] view plain copy

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

script type="text/javascript" src="jquery.js"/script

script type="text/javascript" src="jquery.uploadadapter.js"/script

script type="text/javascript" src="jquery.loadscript.js"/script

style type="text/css"

/style

script type="text/javascript"

$(function(){

$('#upload').uploadadapter({

  fileTypeExts:'*.jpg;*.png',

  auto:false,

  showUploaded:true,

  baseurl:'.',//当前目录

  multi:true,

  removeTimeout:9999999,

  uploadurl:'upload.php'

  });

});

/script

/head

body

input type="file" name="file" id="upload"  /

/body

/html

ie8下调用flash

firefox、chrome下调用html5

略有差异,ie8下圆角没了。。。如果不喜欢这个样式呢,就请打开css文件自己修改吧。

很简单的调用,可以看到在页面中使用的是uploadadapter,由它来决定调用哪个插件。俩个插件所需要的js文件和css文件都是异步引入的,此处用到一个小插件loadScript。参数没有写全,可以自己看源代码的注释~

uploadadapter中的调用情况是我需要的配置,你也可以随意修改。

四、相关文件注释

在此把文件夹中的文件做一个简要介绍:

/html5uploader   html5上传插件,你也可以拿来单独使用

/uploadify3.2        flash上传插件,也可以拿来单独使用

/uploads    存放上传的文件

/jquery.loadScript.js   用于异步引入脚本的小插件

/jquery.uploadadapter.js   适配器,用来判断客户端类型,动态调用上传插件

/upload.php    后台处理程序,最基本的

五、上源码,注释很全哦

六、一个bug!!

很重的哦,我之前给疏漏了,在这里说一下,文件就不重新上传了

在jquery.html5uploader.js的158和164行,将$('.uploadify-progress')改为$('#'+file.index).fnd('.uploadify-progress'),否则上传多个文件会混淆。


当前文章:html5兼容ie8,网页兼容ie8
文章位置:http://ybzwz.com/article/dsdojjo.html