让IE支持HTML5的方法_html5教程技巧

来源:脚本之家  责任编辑:小易  

你说反了,是浏览器支持HTML5而不是HTML5去支持浏览器。不同的浏览器对HTML5支持不同。浏览器厂商之间的竞争促使各大浏览器对HTML5 和 CSS3 的支持越来越完善,下面的图表列出了 IE,Chrome,Firefox,Safari,Opera 五大主流浏览器,在 Mac 和 Windows 两个平台,对HTML5 和 CSS3 各种特性最新的支持情况的详细清单(个别数据可能不准确,大家可以通过 caniuse.com 查询更为详细的信息)。CSS3 属性从表中可以看出,除了 Overflow Scrolling 还没有浏览器支持之外,其它属性都已经有浏览器实现了。在 Windows 平台,Chrome 支持除 Overflow Scrolling 以外的所有属性(图片数据有误,CSS3 3D Transforms 在 Chrome 25 开始已支持,需要加-webkit-前缀),其次支持比较好的是 Firefox,还不支持 CSS3 Reflections。曾经一片红叉的 IE 开始迎头赶上,IE10 已经和能和 Opera 比拼了。在 Mac 平台情况要好很多,Safari、Chrome 和 Firefox 几乎支持全部的 CSS3 特性。Opera 也只有少数几个属性不支持。(注:CSS3 的 Overflow Scrolling 属性用于模拟移动设备原生的阻尼滚动,类似于 iScroll 实现的滚动效果,目前只有 iOS 5 内置的 Sarari 浏览器支持,Native style momentum scrolling to arrive in iOS 5)CSS3 选择器CSS3 选择器兼容情况最让人欣慰,除了 IE9 以下的版本,其它浏览器已全部支持 CSS3 选择器特性。IE6 悲剧的一个都不支持,IE7 和 IE8 仅支持少部分,IE9 和 IE10 给力,竟然也全部支持。HTML5 Web 应用程序HTML5 为支持 Web 应用程序开发新增的这些特性是HTML5 最激动人心的部分,包括本地存储、离线存储、地理定位、Workers 和 WebSockets 等等。Chrome 最给力,支持全部特性(表中数据有误,Touch(触控)事件,Chrome 25 和 Firefox 19 已支持)。WebSQL Database 已经被 W3C 放弃了,浏览器不支持也没关系,而 Indexd Database,IE10、Chrome 和 Firefox 都支持,这是开发者的福音啊。IE10 很给力,就 Meter 标签和 Touch Event 不支持。HTML5 图形和内嵌内容这应该是HTML5 最令人期待的东西了,内置Canvas,Audio,Video,SVG、WebGL 和 SMIL 等重要特性对象。Chrome、Firefox、Safari、Opera 以及 IE9/IE10 都支持,太棒了!HTML5 音频编码Chrome 依然给力,对HTML5音频格式又是全部支持,Safari 除 Ogg Vorbis 格式外全部支持。让人感到奇怪的是 IE 竟然不支持自家的 WAV 格式,而 Chrome、Firefox、Opera 和 Sarari 却都支持,⊙﹏⊙b汗。HTML5 视频编码对HTML5视频的支持还是 Chrome 最好,包容天下。Firefox 和 Opera Ogg Vorbis 和 WebM 两种视频格式,不支持 H.264,相反的 IE9/IE10 和 Safari 只支持 H.264。据统计,目前 80%的视频使用 H.264 编码,期待 H.264 早日统一的视频编码标准!HTML5 表单输入HTML5新增了众多新的 input 类型,例如 DateTime、Range、Colour 等等,以前这些都是需要使用 JavaScript 才能实现的功能,如今只需要设置 input 类型就能实现。淡定的 Opera 竟然全部支持,有点意外!Chrome 还不支持 DateTime 类型,其它的都支持,IE10 和 Safari 都支持程度相当,而 Firefox 这方面还需努力。HTML5 表单属性HTML5表单属性也是对表单功能的重要改进,简化了 Web 应用开发。在 Mac 平台,除了 Safari 还不支持 List 属性外,其它属性都支持。在 Windows 平台,Chrome、Opera 和 IE10 全部支持,Firefox 又掉队了,竟然落后 IE 了,Min、Max 和 Step 属性都还不支持。写在最后目前,对HTML5 和 CSS3支持最好的是 Chrome,IE10 已经能和 Safari、Firefox、Opera 旗鼓相当了。总的来说,各大浏览器对HTML5 和 CSS3 的支持正在不断完善,越来越多的各大企业和开发者也在尝试在项目中使用HTML5 和 CSS3,特别是在移动互联网领域,已经有很多优秀的应用开发出来,未来的 Web 有很多令人期待的东西www.zgxue.com防采集请勿采集本网。

越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:

1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。当前,video 元素支持三种视频格式: Ogg=带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4=带有 H.264 视频编码和 AAC 音频

2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。

IE中目前不支持,何况IE6,建议暂时不要用5

针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

主流浏览器对html5的支持情况 (1)Chrome,Firefox:支持html5很多年,而且有自动升级,支持最好。(2)Safari,Opera:同样支持html5很多年,支持也很好。(3)IE:IE10起比较好了,之前很差。

html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

方法产生的标签,利用这一特性让这些浏览器支持HTML5新标签。2.使用是html5shim框架 另外,DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素,此外,还可以根据新增的结构、功能元素来加以区分。

复制代码代码如下:

让所有IE都支持html5的解决方法 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。作者已经把js文件放在Google code project上并允许大家直接

<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >

html5shiv官方网址:http://code.google.com/p/html5shiv/

下面是一些补充:

当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。

以下是在的IE 8显示的例子,未作处理前:

在IE 8显示的例子,未作处理前

让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。

复制代码代码如下:

让所有IE都支持html5的解决方法 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。作者已经把js文件放在Google code project上并允许大家直接

<!--[if IE]>

<script>

document.createElement("header");

document.createElement("footer");

document.createElement("nav");

document.createElement("article");

document.createElement("section");

</script>

<![endif]-->

添加以上代码后,在IE8中显示的效果如下:

在IE 8显示的例子,处理后

sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。

演示如下

提示:您可以先修改部分代码再运行

复制代码代码如下:

让所有IE都支持html5的解决方法 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。作者已经把js文件放在Google code project上并允许大家直接

<!--[if IE]>

<script>

(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

</script>

<![endif]-->

HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:

复制代码代码如下:

让所有IE都支持html5的解决方法 html5.js必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。作者已经把js文件放在Google code project上并允许大家直接

header, footer, nav, section, article {

display:block;

}

mp4的视频格式是不是H.264?音频格式是不是AAC?请将你的视频转成这种格式。如果不行,再试试ogg和webm。高级一点,还可以使用ffmpeg。以PHP为例,执行exec("ffmpeg.exe-i".$sourceVideo."".$newVideo,$arr2,$result);就可以将很多格式的视频转换为上面我所说的mp4格式。sourceVideo,$newVideo,$arr2,$result这几个是我自己定义的变量,意思分别是源视频,转换后的新视频,随意写的一个没有作用只是作为填充的数组,转换结果内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5之html元素扩展(上)—新增加的元素及使用概述
  • 让ie6支持html5元素的方法
  • 检测浏览器是否支持html5视频的代码
  • 几个解决兼容ie6\7\8不支持html5标签的几个方法
  • html5 canvas-1.canvas介绍(hello canvas)
  • html5 浏览器支持 如何让所有的浏览器都支持html5标签样式
  • input file上传文件样式支持html5的浏览器解决方案
  • ie支持html5的解决方法
  • 如何让ie9以下版本(ie6/7/8)认识html5元素
  • 如何让IE8支持html5中的video标签
  • html5 所有的浏览器 都支持么
  • ie8支持html5吗
  • 支持HTML5的各主流浏览器的最低版本
  • html5的视频插件支持哪些视频格式
  • HTML5建的网站在低版本的IE中也能够正常浏览吗?
  • 目前,支持Html5的浏览器有哪些
  • 如何处理html5新标签的浏览器兼容问题
  • 哪款浏览器对html5,css3支持最好
  • HTML5如何在网页中实现3D效果
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5iehtml5html5之html元素扩展(上)—新增加的元素及使用概述让ie6支持html5元素的方法检测浏览器是否支持html5视频的代码几个解决兼容ie6\7\8不支持html5标签的几个方法html5 canvas-1.canvas介绍(hello canvas)html5 浏览器支持 如何让所有的浏览器都支持html5标签样式input file上传文件样式支持html5的浏览器解决方案ie支持html5的解决方法如何让ie9以下版本(ie6/7/8)认识html5元素html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码iphonex安全区域(safe area)底部小黑条在微信小程序和
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved