使用 HTML5 Shiv 让 IE 支持 HTML5
使用 HTML5 Shiv 让 IE 支持 HTML5
Denis
发布于 2023-04-15 15:53:57
发布于 2023-04-15 15:53:57
现在越来越多浏览器已经实现支持 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 下基本显示出来。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录