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标签的几个方案的更多相关文章

  1. 在IE6/7/8下识别html5标签

    识别html5标签: html5添加了许多语义化的标签,比如<nav></nav>,<aside></aside>,<article>< ...

  2. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  3. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  4. IE（IE6/IE7/IE8）支持HTML5标签

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  5. IE（IE6/IE7/IE8）支持HTML5标签--20150216

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  6. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  7. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

  8. 网页制作常见的问题（怎样兼容IE6/IE7/火狐浏览器）

    1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG 例如: <style type="t ...

  9. 网页制作常见的面试题（怎样兼容IE6/IE7/火狐浏览器）

    1.IE6双边距问题? 在IE6的浏览器中明明设置的是10px的margin却为什么显示的是20px的margin其实这个Ie6的一个双边距BUG例如:<style type="tex ...

随机推荐

  1. ASP.NET Core MVC 2.x 全面教程_汇总贴

    Reshaper快捷键盘 快速生成属性:prop Ctrl+. ASP.NET Core MVC 2.x 全面教程:https://www.bilibili.com/video/av38392956 ...

  2. Makefile研究(二)—— 完整可移植性模板

    转自:http://blog.csdn.net/jundic/article/details/17676461 一直想写一个很全很好移植的Makefile模板,我觉得一个完整makefile 应该包含 ...

  3. Fitnesse 之 Script Table

    在表中每一行代表一个执行脚本. 第一行中的Script关键字表明表格类型,后面紧跟着类名(Fixture)和构造函数中的参数.在一个测试页中如果没有再指定其它Fixture,将一直沿用上一个Fixtu ...

  4. Node中的console控制台

    1. Node中的console类似于浏览器中的控制台console,它的作用在于帮助开发人员做API的辅助测试. 2. Node中的console主要功能:REPL 2.1 read 读取你输入的内 ...

  5. IT兄弟连 JavaWeb教程 JSP动作指令

    JSP动作指令语法 JSP动作指令语法格式如下: <jsp:动作名 属性名1="属性值1" 属性名2="属性值2" ... %> JSP具体动作指令 ...

  6. 多线程 GCD队列组

    //  DYFViewController.m //  623-08-队列组 // //  Created by dyf on 14-6-23. //  Copyright (c) 2014年 ___ ...

  7. Promise对象深入理解

     目录 基本用法 返回另一个 Promise 实例 Promise.prototypeof.then Promise.prototype.catch Promise.prototype.finally ...

  8. 【NOIP2015】 Day2 T2 字串 （多维动归）

    2018-09-12 原题传送门(洛谷)https://www.luogu.org/problemnew/show/P2679 模拟考试的时候完全没有想到 正确的DP方程呢 本来写了一个大致是对的转移 ...

  9. SpringBoot | Velocity template

    SpringBoot版本: <parent> <groupId>org.springframework.boot</groupId> <artifactId& ...

  10. java数据结构----带权图

    1.带权图:要引入带权图,首先要引入最小生成树,当所有的边拥有相同的权值时.问题变得简单了,算法可以选择任意一条边加入最小生成树.但是当边有不同的权值时,需要用一些算法决策来选择正确的边. 2.带权图 ...