您的位置：首页技术文章

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

【字号：大 中 小】日期：2024-01-25 15:33:10浏览：62作者：馨心

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

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

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

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

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

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

下面是一些补充：

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

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

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

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

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

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

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

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

演示如下

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8>

<!-- simplified version; works on legacy browsers -->

<title>Basic styling of new structural tags</title>

<style>

*{margin:0;padding:0;}

body {background-color:white; color: black; text-align:center;}

header, footer, nav, section, article {display:block;}

header {width:100%; background-color:yellow;}

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

footer {width:100%; background-color:pink; clear:both;}

</style>

<!--[if IE]>

<script>

(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,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])}})()

</script>

<![endif]-->

<body>

<header><h1>Hello</h1></header>

<nav><p>Menu</p></nav>

<section>

<p>Section</p>

<article><p>article 1</p></article>

<article><p>article 2</p></article>

</section>

<footer><p>The footer</p></footer>

</body>

</html>

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

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

让IE支持HTML5的方法有哪些？IE支持HTML5方法推荐

上一条：应用before/after伪类时怎样让CSS命名以及针对ie6/ie7浏览器兼容？解决方法分享下一条：IE6、IE7、IE8浏览器下的CSS、JS兼容性怎么样？3种对比分析
相关文章：
1. 怎么让div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器2. requestAnimationFrame使用示例详解3. 基于JavaScript实现图片裁剪功能4. React优雅的封装SvgIcon组件示例5. uniapp自定义验证码输入框并隐藏光标6. 详解JavaScript中原始数据类型Symbol的使用7. JavaScript深拷贝方法structuredClone使用8. uniapp 手机验证码输入框实现代码(随机数、倒计时、隐藏手机号码中间四位)可以直接使用9. 使用Node.js实现Clean Architecture方法示例详解10. Jquery使用原生AJAX方法请求数据