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. mysql 、redis的区别

    我们知道,mysql是持久化存储,存放在磁盘里面,检索的话,会涉及到一定的IO,为了解决这个瓶颈,于是出现了缓存,比如现在用的最多的 memcached(简称mc).首先,用户访问mc,如果未命中,就 ...

  2. Angular6在自定义指令中使用@HostBingDing() 和@HostListener()

    emmm,,,最近在为项目的第二阶段铺路,偶然看到directive,想想看因为项目已经高度集成了第三方组件,所以对于自定义指令方面的经验自己实在知之甚少,后面经过阅读相关资料,总结一篇关于在自定义指 ...

  3. 项目中常用的js骚操作

    //打开网址window.open("http://www.runoob.com"); //判断是否为url var url = $("#url").val() ...

  4. POJ3268【最短路】

    题意: n个点m条有向边,每个点有一头牛,每头牛会沿着各自的最短路先到x点,然后又从x点到各自的点,求这些牛中间最短路程最大的牛. 思路: 从x点到各点的最短路不用说了,裸的最短路: 但是从所有点到x ...

  5. CodeForces660B【模拟—水】

    感觉模拟题用函数分块写比较清晰~传参的话,字符串要么直接全局,或者指针也是容易操作,总之思路清晰,然后分块清晰,模拟wa的少吧. 这题水题,不说了. #include <bits/stdc++. ...

  6. Java之多线程同步基础

    java学习的道路上呢总有一些麻烦的东西需要花费一些时间去理解,比如个人认为不好搞的多线程. 线程是并列运行的 因为是并列运行,所以有时候会发生资源抢占,从而导致参数变化; 比如酱紫 package ...

  7. kali 装好java后提示 -bash: /home/javainstall/jdk1.8.0_171/bin/java: 没有那个文件或目录

    [问题现象] 在/etc/profile配置里面也是配置好了的,并且该目录是有java的 [问题原因] 出现这个问题的原因:64位的系统,安装了32位的Java. [解决方案] 通过网络搜索,发现通过 ...

  8. IDEA快捷的添加包名

    Intellij IDEA使用(十四)—— 在IDEA中创建包(package)的问题 2018年02月24日 17:24:49 _云卷云舒_ 阅读数:6264 标签: intellij idea 更 ...

  9. 51Nod 1873 初中的算术

    大神的字符串快速幂 #include <iostream> #include <string> #include <algorithm> #include < ...

  10. bryce1010专题训练——LCA

    1.Targan算法(离线) http://poj.org/problem?id=1470 /*伪代码 Tarjan(u)//marge和find为并查集合并函数和查找函数 { for each(u, ...