使用 HTML5 Shiv 让 IE 支持 HTML5
html5 使用 支持 IE
2023-06-13 09:18:38 时间
现在越来越多浏览器已经实现支持 HTML5,其中 iPad 上的 Safari 浏览器对 HTML5 支持就非常完美,所以我们做的 iPad 导航就是完全用 HTML5 写的。
IE 无法渲染 HTML5 样式
IE 的用户完全不是我们的目标用户,但是总有人有人说我们网站显示的乱七八糟,很烂,因为 IE 不知道如何给不能识别的标签或者元素渲染 CSS,比如 <header> 这些 IE 无法识别的标签,我们在 CSS 中定义的样式,IE 就无法渲染,所以还是决定让 iPad 导航至少在 IE 下能够布局正常一点。
前面说了 IE 对 HTML5 标签无法识别,所以无法渲染样式,而 Sjoerd Visscher 发现一种方法可以强制 IE 渲染 HTML5 标签,当你创建一个新的 DOM 元素(名字和它无法识别的标签相同)的时候,IE 就可以渲染,并且甚至无需插入这个元素,下面 blah 就能被渲染。
<html>
<head>
<style>blah { color: red; }</style>
<script>document.createElement("blah")</script>
</head>
<body>
<blah>Hello!</blah>
</body>
</html>
remy sharp 整理了一个迷你的脚本 html5.js,通过上面的方法让 IE 支持所有的 HTML5 标签。
HTML5 Shiv 使用
html5.js 必须在页面head元素内调用(因为 IE 必须在元素解析前知道这个元素,所以这个 JS 文件不能在页面底部调用。)
作者已经把js文件放在Google code project上并允许大家直接调用: http://html5shiv.googlecode.com/svn/trunk/html5.js 可以使用IE条件注释来调用这个 JS 文件,这样像 FireFox, Safari 等非 IE 浏览器就会忽视这段代码,也就不会有无谓的 HTTP 请求了。下面这段代码仅会在IE浏览器下运行:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
最后大家可以看看效果 http://ipaddh.com/ 在 IE 下基本显示出来。
相关文章
- HTML5 Canvas的简单使用
- cshtml标记html5,cshtml常用标签
- 基于HTML5的爱心表白动画特效
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- HTML5
- html5空格代码怎么写_空格的代码是什么
- 使用jqMobi开发app基础:HTML5 LocalStorage 本地存储详解手机开发
- JavaScript和html5实现的3D玫瑰花详解编程语言
- html5 文件api使用示例详解编程语言
- 告诉你html5比普通html多了哪些东西详解编程语言
- 体验使用HTML5开发Kinect体感游戏详解编程语言
- IOS手机 html5页面 数字变成蓝色链接的原因详解编程语言
- HTML5自定义select标签样式的方法详解编程语言
- html5 textarea 写入换行的方法详解编程语言
- html5手机上设置图片需要注意的问题详解编程语言
- 利用HTML5和MySQL实现数据交换(html5连接mysql)
- HTML5标准制定完成
- Flash 已死, Adobe 鼓励开发人员使用 HTML5
- HTML5 history新特性pushState、replaceState
- AngularJS中使用HTML5摄像头拍照
- HTML5之lang属性与dir属性的详解
- html5的自定义data-*属性和jquery的data()方法的使用示例
- 使用非html5实现js板连连看游戏示例代码
- js判读浏览器是否支持html5的canvas的代码