不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭

Posted Young

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭相关的知识,希望对你有一定的参考价值。

如果我们不做什么手脚的话,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浏览器下生效了!!
技术分享

提到使用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下长相如下:
技术分享

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

技术分享

靠谱方法:使用命名空间

我们需要做的如下:

  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浏览器下的效果:
技术分享

该方法,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

(本篇完)

以上是关于不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭的主要内容,如果未能解决你的问题,请参考以下文章

让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法

怎样让你的电脑不显示IE浏览器(win7)

JavaScript添加IE事件处理程序

有趣的Javascript:只需一个JS让万恶的IE5IE6IE7IE8全都支持H5原生Canvas绘图(有演示demo)

解决IE9以下版本浏览器不支持HTML5标签的问题

如何让浏览器运行javascript代码的?