不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭
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浏览器下生效了!!
提到使用JavaScript, 必定又有一些人拿可用性来叫嚣了:“尼玛,要是用户把JavaScript给禁掉,那不就嗝屁啦!”
据说因为twitter在JS被禁用的情况下就像中了葵花点穴手——动不了了!而被一些热心人士提意见:应该改进改进啊,可以让在JS禁用的情况下正常使用。
理想是丰满的,实现是荆棘的!讨论要不要在实际项目中支持无JavaScript的正常使用,会让刘先生发话的:“我活了42年,这是我见过的最无聊的问题!”
However, 就像是我们不会亲自实践人工呼吸,但是知道该怎么做还是有必要的。因此,我们知道如何不使用JavaScript让IE浏览器支持HTML5元素也是很有必要的。
*通配符方法
据说是WHATWG组提出的一个方法,如下建议:
- 知道DOM的体重以及三围,样式应用在其他元素上(非HTML元素)
- 使用全局选择器,通配符(
*
)指向正确的目标元素 - 无脚本应用
不过,根据我自己的尝试,这个方法让我感到有些莫名其妙:如果样式要应用在内部的其他元素上,尼玛直接在里面元素设置个类名控制不久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
靠谱方法:使用命名空间
我们需要做的如下:
- 修改
<html>
标签处的命名空间 - 使用类似
<html5:section><html5:/section>
标签 - 使用如下选择器名称进行控制:
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元素——张鑫旭的更多相关文章
- html5备忘录——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...
- 让更多浏览器支持html5元素的简单方法
当我们试图使用web上的新技术的时候,旧式浏览器总是我们心中不可磨灭的痛!事实上,所有浏览器都有或多或少的问题,现在还没有浏览器能够完整的识别和支持最新的html5结构元素.但是不用担心,你依然可以在 ...
- 如何让低版本IE浏览器支持HTML5标签并为其设置样式
现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...
- html5.js让IE(包含IE6)支持HTML5元素方法
原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...
- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素。
html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁,目的是让 IE 识别并支持 HTML5 元素. 各版本html5shiv.js CDN网址:https://ww ...
- 让ie浏览器支持html5新标签的解决方法(使用html5shiv)
没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...
- jquery实现上传图片预览(需要浏览器支持html5)
jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- 如何让旧浏览器支持HTML5新标签
HTML5出现也不短了,很多网站的页面都进行了改版,为了降低代码量(不需要起太多的类名),提升加载速度,提高标签的语义性,因此,在网页中大量使用了section,article,header等HTML ...
- 让旧浏览器支持HTML5新增标签
首先我们使用JS进行标签创建,为HTML文件创建我们需要的这几个HTML5标签. 接下来,我们需要使用CSS进行这几个HTML5标签的样式控制,这是因为,通过这种方法创建的新标签,默认是行内元素. ...
随机推荐
- Java并发工具类之并发数控制神器Semaphore
Semaphore(信号量)使用来控制通知访问特定资源的线程数量,它通过协调各个线程,以保证合理的使用公共资源. 我们可以这么理解Semaphore,比如一个厕所只有6个坑,同时只能满足6个人上厕所( ...
- jsp文件和HTML互相引入的乱码问题
1.在jsp中用include指令引入HTML文件时遇到的问题: jsp.html都可以正确的显示,当jsp引入html时访问jsp页面HTML出现乱码,jsp原有的输出无乱码,解决方法: 在HTML ...
- chrome下uploadify导致页面崩溃
解决方法在初始化uploadify之前用timeout来延迟加载 $(function(){ setTimeout(function(){ $('#file_upload'). ...
- 对CAS机制的理解(一)
先看一段代码:启动两个线程,每个线程中让静态变量count循环累加100次. public class CountTest { public static int count = 0; public ...
- django遇到的坑
博主新手,今天第一次用django,遇到了很多坑和大家分享一下啊,win8.1+python3.6! 第一步安装django,配置好环境变量 .配置好环境变量.配置好环境变量(注意是配置好,不是配置了 ...
- SQL查询排名第二名的信息
今天看见同学去面试的面试题,查询出某个字段排名第二名的信息,自己就看看 如果是Oracle ,这不就是考察Oracle分页么,以Oracle的emp表为例,根据薪水排名,查询排名第二的员工信息: se ...
- Intellij-怎么避免import.*包,以及import包顺序问题
Intellij版本 IntelliJ IDEA 2018.1.2 (Ultimate Edition) Build #IU-181.4668.68, built on April 24, 2018 ...
- HUE配置文件hue.ini 的hbase模块详解(图文详解)(分HA集群和非HA集群)
不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...
- 容器挂载volume出现“Permission denied”的问题定位解决
使用如下系统(centos)运行容器后,在容器内的挂载目录内执行ls命令出现了“Permission denied”的错误 Linux localhost.localdomain 3.10.0-862 ...
- ID3、C4.5和CART决策树对比
ID3决策树:利用信息增益来划分节点 信息熵是度量样本集合纯度最常用的一种指标.假设样本集合D中第k类样本所占的比重为pk,那么信息熵的计算则为下面的计算方式 当这个Ent(D)的值越小,说明样本集合 ...