不使用JavaScript让IE浏览器支持HTML5元素

这篇文章发布于 2012年07月20日，星期五，13:44，归类于 CSS相关。 阅读 94909 次, 今日 1 次 30 条评论

 

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2515

如果我们不做什么手脚的话，IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> …

然而，前篇Google前端规范HTML部分中提到：要使用语义的HTML5元素作为text/html, 考虑到Google不可能把IE8等浏览器弃之不顾，因此，肯定是有什么方法可以让IE6~8浏览器也支持HTML5元素的。

熟知的JavaScript方法

如果你对HTML5元素的关注比对红番茄八卦的关注多的话，应该都知道如何是有简单的JavaScript代码让IE6~8浏览器支持HTML5元素，类似下面代码：

(function() {
    // 页面头部
    var a = ['section', 'article', 'nav', 'header', 'footer' /* 其他HTML5元素 */];
    for (var i = 0, j = a.length; i < j; i++) {
        document.createElement(a[i]);
    }	
})();

您可以狠狠地点击这里：JS让IE支持HTML5元素demo

对比demo页面源代码以及实际效果，我们可以发现，简单的一句：

document.createElement("section");

就让section{}的相关样式在IE7浏览器下生效了！！
IE7下使用JavaScript支持HTML5元素示意 张鑫旭-鑫空间-鑫生活

提到使用JavaScript, 必定又有一些人拿可用性来叫嚣了：“尼玛，要是用户把JavaScript给禁掉，那不就嗝屁啦！”

据说因为twitter在JS被禁用的情况下就像中了葵花点穴手——动不了了！而被一些热心人士提意见：应该改进改进啊，可以让在JS禁用的情况下正常使用。

理想是丰满的，实现是荆棘的！讨论要不要在实际项目中支持无JavaScript的正常使用，会让刘先生发话的：“我活了42年，这是我见过的最无聊的问题！”

However, 就像是我们不会亲自实践人工呼吸，但是知道该怎么做还是有必要的。因此，我们知道如何不使用JavaScript让IE浏览器支持HTML5元素也是很有必要的。

*通配符方法

据说是WHATWG组提出的一个方法，如下建议：

  1. 知道DOM的体重以及三围，样式应用在其他元素上（非HTML元素）
  2. 使用全局选择器，通配符(*)指向正确的目标元素
  3. 无脚本应用

不过，根据我自己的尝试，这个方法让我感到有些莫名其妙：如果样式要应用在内部的其他元素上，尼玛直接在里面元素设置个类名控制不久OK了！！

可能，这种方法适用于类似于：

section p {}

这种含有HTML标记的后代选择器。上面的CSS选择器IE6~8是不认识的，WHATWG说的方法是使用：

body > * p {}

对IE7, IE8浏览器进行匹配（IE6不支持，我擦~~, 但这个FireFox ， Chrome又都支持）

总之这是一个我看不懂，且觉得很蛋疼的不适应中国国情的方法，求高人指点！

您有兴趣可以狠狠地点击这里：*通配符让IE支持HTML5元素demo

为了避免各个浏览器间复杂的多角恋，我不得已使用了条件注释：

<!--[if lt IE 9]>
<style>
body > * .section {
    display: block;
    padding: .5em;
    border-left: 3px solid #ddd;
    color: #999;
}
</style>
<![endif]-->
<style>
section .section {
    display: block;
    padding: .5em;
    border-left: 3px solid #ddd;
    color: #999;
}
</style>

HTML如下：

<section><div class="section">中国将向非洲...</div></section>

IE6下无效果，IE7下长相如下：
通配符与IE7下的HTML5元素支持 张鑫旭-鑫空间-鑫生活

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]-->

这明眼人一眼就看出意思：IE6~8使用传统的<div>标签，您对效果有兴趣的话，可以狠狠地点击这里：条件注释让IE支持HTML5元素demo

条件注释下使用普通标签让IE7浏览器样式正常 张鑫旭-鑫空间-鑫生活

靠谱方法：使用命名空间

我们需要做的如下：

  1. 修改<html>标签处的命名空间
  2. 使用类似<html5:section><html5:/section>标签
  3. 使用如下选择器名称进行控制：html5\:section {}

具体操作如下：

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">
    <body>
        <html5:section>...</html5:section>
    </body>
</html>

然后使用：

html5\:section {
    /* 样式 */
}

您可以狠狠地点击这里：命名空间让IE支持HTML5元素demo

上demo HTML代码为：

<div class="section">所有浏览器：黄忠，绿忠，黑忠，红中</div>
<section>不包括IE6-8: 黄忠，绿忠，黑忠，红中</section>
<html5:section>包括IE6-8浏览器：黄忠，绿忠，黑忠，红中<html5:/section>

CSS代码为：

.section, section, html5\:section {
    display: block;
    padding: .5em;
    border-left: 3px solid #ddd;
    color: #999;
}

此时，我们在看看IE7浏览器下的效果：
使用命名空间+html5:section表示的标签识别了

该方法，IE6浏览器也是支持的。看上去使用也蛮清爽的。至少比上面两个方法要靠谱N倍了！
使用的时候注意XHTML需要没有错误，否则站点可能什么都显示不出来。同时，最头部可能要添加<?xml version="1.0" encoding="utf-8"?>，据说，否则IE6会采用严格模式。

参考文章：HTML5 elements in Internet Explorer without Javascript

本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=2515

（本篇完）

相关文章
«上一篇
下一篇»
分享到：
标签： , , , , ,


发表评论（目前30 条评论）

  1. 某某某说道：
    2021年02月24日 22:41

    记得在降级的IE控制台上有类似这样的：

    What Happened?

    回复
  2. York说道：
    2018年05月31日 16:03

    黄忠被玩坏了

    回复
  3. iKan88说道：
    2013年10月14日 19:15

    很好的技巧，感谢博主分享！

    回复
  4. fairy说道：
    2013年05月2日 17:59

    额，还是这样= =！不能说样式冲突，是样式结合在一起了，互相有影响，~~~~(>_<)~~~~ 贴不了html代码。。。。。

    回复
  5. fairy说道：
    2013年05月2日 17:56

    好像我写两个的话，会有样式冲突~~~~(>_<)~~~~

    无标题文档

    html5\:header { background-color: #333; border: 1px solid #f00; color: #FFF;display: block; }
    .section, section, html5\:section {
    display: block;
    padding: .5em;
    border-left: 3px solid #ddd;
    color: #999;
    }

    2233333

    所有浏览器：黄忠，绿忠，黑忠，红中
    不包括IE6-8: 黄忠，绿忠，黑忠，红中
    包括IE6-8浏览器：黄忠，绿忠，黑忠，红中

    回复
  6. 过马路的老公公说道：
    2013年04月12日 11:20

    我觉得吧，禁用js的操作的毕竟非常罕见，twitter在JS禁止的情况下动不了，就会google一下发生了什么？然后被告知是JS被禁用的问题，重新打开JS，这样会提高民众的WEB意识。或许直接弹出一个对话框说你的浏览器JS被禁用，点击一键打开，就噢了，没必要为这些1%的时间去花时间兼容

    回复
  7. 卡卡西说道：
    2012年11月21日 16:00

    例如：ＵＬ中的　《ul contentEditable=”true”》

    回复
  8. 卡卡西说道：
    2012年11月21日 15:59

    html5标签里的属性怎么解决？

    回复
  9. 妮妮小作坊说道：
    2012年10月26日 15:22

    最后一个在IE下还是没有起到作用呀

    回复
  10. Hy说道：
    2012年09月5日 14:38

    为什么要搞html5？个人看法，除了一系列规范和增加强大的canvas功能外，还有seo，“”这样的写法对seo会不会造成不良影响？~

    回复
  11. t说道：
    2012年08月22日 16:35

    额 又不行。。。
    <!--[if gte IE 9]><!-->
    Lorem ipsum dolor sit amet.
    <!--<![endif]-->
    这下呢。。。

    回复
  12. t说道：
    2012年08月22日 16:32

    好吧不知道这里的评论有这么纠结的规则。。。
    老老实实转义字符吧
    <!–[if gte IE 9]><!–>
    Lorem ipsum dolor sit amet.
    <!–<![endif]–>

    回复
  13. 前端开发-子任说道：
    2012年08月17日 17:17

    这样研究意义不大，增加不必要的东东~还是用比较标准的html5，毕竟我们的向前看~

    回复
  14. luacloud说道：
    2012年08月16日 11:12

    使用了命名空间的模式是不是就可以自己定义标签了啊？

    回复
  15. gbin1说道：
    2012年08月15日 14:43

    还是等IE6彻底从天朝消失吧

    回复
  16. 沙拉酷儿说道：
    2012年08月9日 17:42

    你最后一个还是在IE下面有问题啊啊啊啊啊啊，你可以在看看

    回复
  17. 我的名字叫麒说道：
    2012年08月5日 14:57

    将IE6从地球上消灭！

    回复
  18. yaodaye说道：
    2012年08月1日 15:44

    张先生的方法果然凶残。那么还有木有不用高科技让IE6支持CSS3的方法呢？

    回复
  19. jacky说道：
    2012年07月26日 17:11

    你好，关注你的站很长一段时间了，学到不少东西。
    有个问题请教：
    src= 跟 href= 的区别是什么啊
    网上有人说src是search的简写 ，也有人说是source的缩写，源的意思。
    那么为何在链接外部css文件时用href，而链接js文件时用 src 呢 ？

    回复
  20. 郁闷说道：
    2012年07月26日 16:11

    自定义样式啊–！

    回复
  21. 二月火柴说道：
    2012年07月25日 16:39

    大于小于号被弄没了，自己转义一下

    果然蛋疼，实例了一下，虽然IE6~8可以用，但实际用的时候还是有问题的，比如：

    <html5:section>
    test
    <html5:/section>
    6~8中会在test后面产生空白字符。

    回复
  22. norion说道：
    2012年07月24日 09:12

    蛋疼

    回复
  23. mxd说道：
    2012年07月23日 14:41

    设计交流123： QQ群：89474889

    回复
  24. june说道：
    2012年07月23日 02:18

    用ie6－8的会知道怎么禁用javascript吗？

    回复
  25. 潜行者m说道：
    2012年07月21日 11:02

    还是国外技术发达，他们到底怎么想的这些问题的解决方法。

    回复
  26. 王宁说道：
    2012年07月20日 23:36

    长见识了，一直都在用淘宝的html5.js。。嘿嘿

    回复
  27. liaoqi说道：
    2012年07月20日 19:48

    阳台上的西红柿活了N年，也不懂程序的美，自然觉得精益求精是件无聊的事。相恋3年的红番茄在记者招待会上捂着耳朵也听得到，你的博客更要刷新学习哈。

    回复
  28. 。潇说道：
    2012年07月20日 14:52

    确实有点蛋疼。

    回复
  29. ooxx说道：
    2012年07月20日 14:09

    张先生真无聊

    回复