在IE中使用高级CSS3选择器

别误会,IE是不支持CSS3高级选择器,包括最新的IE8(详见《CSS选择器的浏览器支持》),但是CSS选择器的确是很有用的,它可以大大的简化我们的工作,提高我们的代码效率,并让我们很方便的制作高可维护性的页面。

然而IE对高级CSS选择器特别是CSS3选择器的支持让我们一直不能将CSS选择器推广应用。不过,虽然我们无法左右浏览器的市场份额,却可以通过一些技术改善我们的工作。我们也可以使用其它的一些技术,让IE可以变相支持CSS3选择器。

一位来自英国的网页开发工程师Keith Clark开发了一个JavaScript方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。

用法

你只需要下载Robert Nyman的DOMAssistant脚本和ie-css3.js并将它们在你的页面的head标签中导入,如下:

<head>
 <script type="text/javascript" src="DOMAssistantCompressed-2.7.4.js"></script>
 <script type="text/javascript" src="ie-css3.js"></script>
</head>

支持的选择器

nth-child

nth-last-child

nth-of-type

nth-last-of-type

first-child

last-child

only-child

first-of-type

last-of-type

only-of-type

empty

ie-css3的一些限制

样式表必须通过《link》标签引入。页面级的样式表或者内联的样式表将无效。不过

可以在外部样式文件中使用@import 导入其它样式文件;

样式表文件必须和页面放在同一个域名下面;

使用file://路径的样式文件将由于浏览器的安全问题而不起作用;

:not()选择器尚不支持;

该方法不是动态的,样式被应用之后再改变DOM,将会无效。

如何工作的?

ie-css3.js下载页面的每一个样式文件并解析它的CSS3伪选择器。如果一个选择器被找到,它就会被替换为同名的CSS class。比如: div:nth-child(2) 将会变成 div._iecss-nth-child-2 。然后,Robert Nyman的DOMAssistant用于寻找匹配元素CSS3选择器的DOM节点然后将相应的CSS类添加给它。

最终,元素的样式表会被新的版本替代,然后用CSS3选择器对相应元素添加对应的样式。

避免IE的CSS解释器

根据W3C的规定,一个浏览器应该无视它不认识的CSS规则。这就出现一个问题——我们需要利用样式表文件中的CSS3选择器,但是IE会将它们丢弃。

为了避免这个问题,每一个样式文件都会通过XMLHttpRequest下载。这允许该脚本绕开浏览器内置的CSS解释器并能够读取原始的CSS文件。

时间: 2016-07-08

在IE中使用高级CSS3选择器的相关文章

css3 选择器(三)

接css3选择器(一) 接css3 选择器(二) 这篇和前两篇内容相关性不大,主要是涉及到一些css3的状态选择器,所以标题从一开始. 一.[:enabled]选择器 一看这个属性就知道是专为表单元素提供的.在表单中输入框,密码框,复选框都有可用(:enabled)和不可用(:disabled)状态,默认情况,这些表单元素都处在可用状态.可通过选择器:enabled为这些表单元素设置样式. 举例:可用输入框设置样式. <meta charset="utf-8"> <s

《图解CSS3:核心技术与案例实战》——第2章CSS3选择器

第2章CSS3选择器W3C在CSS3的工作草案中把选择器独立出来成为一个模块.实际上,选择器是CSS知识中的重要部分之一,也是CSS的根基.利用CSS选择器能不改动HTML结构,通过添加不同的CSS规则得到不同样式的网页.

css3 选择器(二)

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当":nth-child(n)"选择器中的n

html-本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题

问题描述 本人菜鸟一枚,请教大神一个关于CSS中ID和类选择器不能用,而标签选择器能用的问题 FIREFOX浏览器,代码如下: HTML代码片段: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> @import url(template/default/styl

在 IBM Operational Decision Management 中实现高级规则治理

引言 本文将介绍高级治理解决方案的 IBM ODM 治理框架.本文基于可配置的 Java 业务逻辑(如 规则治理产品示例所示)提供了常用规则治理实现的一个灵活替代方案.我们将展示,使用规则(而不使用 Java)治理更改流程可在 ODM 中提高高级治理的能效和灵活性. 对于更改活动的治理,我们建议您查 看一下ODM V8.5 中新增的治理功能. 规则治理示例 产品示例中提供的治理扩展的架构如 图 1 所示.本示例的核心是会话控制器,它根据状态提供访问权限.决策中心提供了一个自定义会话控制器,名为

网站分析:Excel中的高级数据分析(二)

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 上篇博文已经介绍了如何安装Excel的高级数据分析功能,并且介绍了回归分析,说实话篇幅有点长,主要是安装那块截图比较多;这篇主要介绍一下描述统计.抽样分析和直方图. 一.描述统计 中位数.众数.数据分布区间可能还比较容易可以算出,但是标准差和方差等的计算就比较麻烦了,这些都是描述样本数据的常用变量,使用Excel数据分析中的"描述统

【mybatis深度历险系列】mybatis中的高级映射一对一、一对多、多对多

学习hibernate的时候,小编已经接触多各种映射,mybatis中映射有到底是如何运转的,今天这篇博文,小编主要来简单的介绍一下mybatis中的高级映射,包括一对一.一对多.多对多,希望多有需要的小伙伴有帮助,小编主要从四个方面进行介绍,订单商品数据模型.一对一查询.一对多查询.多对多查询. 一.订单商品数据模型 1.数据库执行脚本,如下所示: CREATE TABLE items ( id INT NOT NULL AUTO_INCREMENT, itemsname VARCHAR(32

Mybatis中的高级映射一对一、一对多、多对多_java

学习hibernate的时候,小编已经接触多各种映射,mybatis中映射有到底是如何运转的,今天这篇博文,小编主要来简单的介绍一下mybatis中的高级映射,包括一对一.一对多.多对多,希望多有需要的小伙伴有帮助,小编主要从四个方面进行介绍,订单商品数据模型.一对一查询.一对多查询.多对多查询. 一.订单商品数据模型 1.数据库执行脚本,如下所示: <span style="font-family:Comic Sans MS;font-size:18px;">CREATE

中美高级金融EMBA学位班第四次课程圆满结束

中美高级金融EMBA学位班首期班第四次课于上周日(6月21日)在北大圆满结束,来自全国各地的精英同学们在这里度过了四天难忘的学习休闲时光. 本次课程分为<金融学原理>和<国学思维与管理哲学>,上课时间共四天.<国学思维与管理哲学>由北大.清华.浙大总裁研究生课程特聘教授陈东教授主讲,他通过先秦诸子之国学与西学的对比研究,生动系统揭示国学背后的组织管理与为人之道.主讲<金融学原理>的是著名金融学家.清华大学经济管理学院金融系副主任.博士生导师朱武祥教授,课程内