兼容IE6\7\8浏览器的html5标签的几个方案
html5大行其道的时代已经到来。如果你还在等待浏览器兼容，说明你已经与web脱节几条街了。当然，这得益于移动客户端的蓬勃发展。如果还在纠结于，是否应该掌握html5和css3技术时，请狠狠的抽自己几个嘴巴，然后，苦学吧！因为前端的春天已经到来，而且不止一个春天。如果你不信，我只能说：爱信不信！
下面我们来看一个标准的html5标签结构：（我这里只是说标签，其它概不涉及）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>html5</title>
</head> <body>
<header>
<nav></nav>
</header>
<article>
<section>
<h2></h2>
<p></p>
</section>
</article> <footer></footer>
</body>
</html>
html5标签的进步之处当然于它的语义化更直观。当然，这只是html5的进步的九牛之一毛，有人建议说：不要说html5的进步是革命性的，而是发展性的！我不反对此说法，但某方面的确是革命性的。这里不想跑题，我们只说标签。
当然，兴奋于如此美妙的语义化标签时，不仅仍要追问:IE支持吗？很不幸，答案是否定的。如果你已经被IE搞怕了，你只得继续忍受它无尽的折磨。(IE9和IE10已经兼容支持html5和css3.0)
不过你要庆幸，你生活的这个时代有很多天才。有人已经帮你把这个问题解决了！虽然，不能称上完美！
下面我们来看几个解决兼容IE6\7\8不支持html5标签的几个方法：
1、javascript: document.createElenment("......")
IE6\7\8不支持的部分原因是，它们不认为footer是一个有效的html标签。那么我们把它“制造”成一个标签不就行了吗？最直接的办法当然是，javascript 的方式创建：document.createElenment("......")!
(function(){
var element=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
len=element.length;
while(len--){
document.createElement(element[i])
}
})();
这只是简单创建几典型的html5标签，让它们在IE6\7\8可以成为标签。
有人已经写了一个完整的js文件，你只需要引入既可，像这样：
<!--[if lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
也有写作
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
html5shiv和html5shim的区别只有"m"和"v"，没有其它区别！当然这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that's it."
这里要做一个特别的说明：就是IE特有的注释判断：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同
因为IE9虽然支持html5标签，但支持的不是很完整，所以，也可以写"lte",这取决于你的选择！
当然，不要忘了指定新建标签的display属性，大多情况下我希望标签是block的：
header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}
2、嵌套标签的方法
其实说白了就是在，语义化的html5标签内嵌套div等可用标签，然后只给div写样式，我是不赞成这样的写法的。这样做还不如，给标签一个有语义化的id或者class!
<!--[if lt IE 9]>
<style>
body > * .section {
color: #ff0;
}
</style>
<![endif]-->
<style>
section .section { color: #f00;
}
</style>
<section><div class="section">内容测试...</div></section>
但如果类似于这样的结构，用用也无防：
<nav >
<ul class="test">
<li></li>
<li></li>
<li></li>
</ul>
</nav>
3、IE条件注释
<!--[if lt IE 9]><div class="section"><![endif]-->
<!--[if IE 9]><section class="section"><![endif]-->
<!--[if !IE]><!--><section class="section"><!--<![endif]-->
......
<!--[if lt IE 9]></div><![endif]-->
<!--[if IE 9]></section><![endif]-->
<!--[if !IE]><!--></section><!--<![endif]-->
再看一遍IE特有的注释判断：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ： 就是不等于的意思，跟javascript里的不等于判断符相同
相信大家都明白，这是怎么回事！这是一个更加蛋疼的办法！大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。
4、使用xmlns定义文档的命我空间
xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
这是xhtml原有的命名空间，到了html5以后被简化了，。
<html lang="en">
来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素，例如：
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<body>
<html5:section>
<!-- content -->
</html5:section>
</body>
</html>
:html5这个前缀并不是一个标准的写法，你也可以用其它字符代替：hl5也是可以的。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法很明显有个缺陷：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:
html5\:section {
display: block;
}
那么对js的兼容性如何呢？下面是个测试deml
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/">
<head>
<title>;html5</title>
<meta charset="gb2312">
<style>
html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; }
</style>
<script>
window.onload = function(){
alert(document.getElementById("test").innerHTML + "---id")
alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName")
alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写")
}
</script>
</head>
<body>
<html5:section id="test">内容</html5:section>
</body>
</html>
测试结果，IE6\7\8均测试通过，但fixfox和chrome里只有id能获取到，所以这种方法同样不是一个可取的方法！
兼容IE6\7\8浏览器的html5标签的几个方案的更多相关文章
- 在IE6/7/8下识别html5标签
识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...
- html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器
以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
- IE（IE6/IE7/IE8）支持HTML5标签
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- IE（IE6/IE7/IE8）支持HTML5标签--20150216
让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...
- 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)
项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- 网页制作常见的问题（怎样兼容IE6/IE7/火狐浏览器）
1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="t ...
- 网页制作常见的面试题（怎样兼容IE6/IE7/火狐浏览器）
1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG例如:<style type="tex ...
随机推荐
- UVaLive 3695 Distant Galaxy (扫描线)
题意:给平面上的 n 个点,找出一个矩形,使得边界上包含尽量多的点. 析:如果暴力那么就是枚举上下边界,左右边界,还得统计个数,时间复杂度太高,所以我们考虑用扫描线来做,枚举上下边界, 然后用其他方法 ...
- 阻塞调用ShellExecute函数
SHELLEXECUTEINFO si;ZeroMemory(&si, sizeof(si));si.cbSize = sizeof(si);si.fMask = SEE_MASK_NOCLO ...
- Unity UGUI鼠标穿透UI问题（Unity官方的解决方法）
简述 最近在用UGUI的时候遇到了鼠标穿透的问题,就是说在UGUI和3D场景混合的情况下,点击UI区域同时也会 触发3D中物体的鼠标事件.比如下图中 这里给Cube加了一个鼠标点击改变颜色的代码,如下 ...
- VC.NET 需要注意的一些问题
String^ abc = gcnew String(); String^ abc = nullptr override .net 类方法: void Reset() override {....} ...
- [Xcode 实际操作]八、网络与多线程-(14)使用网址会话对象URLSession将地理坐标转换为地名
目录:[Swift]Xcode实际操作 本文将演示如果通过网址会话对象,将地理坐标转换为地名. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模式等优点. 在项目 ...
- 调用Web API将文件上传到服务器的方法（.Net Core）
最近遇到一个将Excel通过Web API存到服务器的问题,其中涉及到Excel的读取.调用API.Web API怎么进行接收. 一. Excel的读取.调用API Excel读取以及调用API的代 ...
- 如何在普通 UIViewController 中使用 UITableView
本系列文章 <Swift on iOS 学习笔记> 将以不定长度.不定内容.不定形式的方式对外发布,主要记录一些 “可重用” 的知识,感谢你的阅读. 在继承自 UIViewControll ...
- 网络编程WebSocket 和socket、HTTP的区别和联系
一.WebSocket 是什么? WebSocket是HTML5规范提出的一种协议:目前除了完犊子的IE浏览器,其他浏览器都基本支持.他是一种协议,万变不离其宗,也是基于TCP协议的:和HTTP协议是 ...
- [題解]luogu_P1052 過河
來源:題解 不發題面 因為 l 範圍太大,而石子數卻很少,步數也僅僅在1~10之間, 也就是說兩個石子之間很有可能間隔很大的距離,不管怎麼跳都能跳過去,那麼中間那些怎麼樣都能跳過去的區間和沒有等價, ...
- C# 面向对象之面向接口
接口的定义 与类不同的是接口用interface关键字 (1)接口中所有成员不能添加任何修饰符,默认为public,如果显示指定修饰符将会出现编译错误; (2)接口中不能包含字段.运算符重载.实例构造 ...