在IE中使用高级CSS3选择器
作者:神采飞扬 来源:前端观察 发布时间:2010-01-22 15:20:00
别误会,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文件。
猜你喜欢
- asp编程手工定义参数的方法: Dim con As ADODB.Connection
- 我一直不很明白在中国国内流行的设计风格,象在国外的很多地方都有鲜明的设计大方向,比如韩国站点设计一般比较花哨,所以动画很多,我们常常看到韩国
- 从2003年到现在,从ACCESS到SQL SERVER的使用。在ACCESS中没有存储过程的概念。在使用过程中,发现ACCESS与SQL
- 大多的MySQL都是装在Linux上的,而我们的本机上一般都会装MySQL-Front.那如何用MySQL-Front连接远端Linux系统
- 这篇论坛文章主要介绍了Oracle数据库到SQL Server数据库主键的迁移过程,具体内容请参考下文。由于项目需要要将以前Oracle的数
- 区别IE6与FF:background:orange;*background:blue;区别IE6与IE7:background:green
- 文本框 textarea 限制输入文字个数的的javascript代码,我们经常在评论留言页面我们需要在客户端限制访客的留言长度,当然最好我
- 如何用下拉列表显示数据库里的内容? 我们来看看实现这个功能的程序:<%Dim objDC, objRSS
- 代码如下:---找出促销活动中销售额最高的职员 ---你刚在一家服装销售公司中找到了一份工作,此时经理要求你根据数据库中的两张表
- folder.htm<html><head><title>闪亮日子之在线创建文件夹</title&
- 前两天有一位网友问我一个关于Javascript中++操作符的问题,他的代码大致是这样的ADS.addEvent(window,'c
- 从Access数据库中选取记录有件最令人丧气的事情,它们是以怎样的顺序输入到数据库内就按照怎样的顺序出来。就算你在Access环境内采用So
- 任何熟悉SQL和关系数据库的人都遇见过大量的连接类型。最简单的说,连接(join)会把两个表的内容组合到一个虚拟表或者recordset内。
- hao123的成功引领了一批的网址站,然而辉煌却是很难复制的,复制了模式却复制不了成功,市场一旦被垄断就很难再超越。网址站的成功也在一定程度
- Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度
- 内容摘要:为什么要什么XML文件:其优势就是处理该XML数据的文档可以是静态文档,比如HTML文件通过Javascript、XMLDOM来解
- 快速掌握 Mysql数据库对文件操作的封装在查看Mysql对文件的操作中,它在不同的操作系统上对文件的操作,除了使用标准C运行库函数,包括o
- 在asp编程中,我们常常使用trim(rtrim ,ltrim)函数去掉一些数据的开头和结尾的空格,笔者最近写了一个asp聊天室,看到下面的
- 版本 0.9来自 http://onewww.net说明:当焦点不在表格内的input时,回车键复制最后一行,delete删除键最后一行选择
- SecureFile功能是oracle 11g中对大对象(LOB)存储格式的完全重新设计实现,原来的LOB存储格式现在通称为BASIXFIL