低版本IE对某些CSS选择器的支持缺陷
来源:互联网 发布:剑三成男初始捏脸数据 编辑:程序博客网 时间:2024/05/23 11:52
经常在使用CSS选择器时,会发现,某些版本的IE浏览器对高级选择器的支持不尽人意。可能是标准老更新,老的IE浏览器当时还没有想到会有那种选择器吧,呵呵。
对于这几个支持的不好的选择器我会一一说明,然后,举例。以下说明中,Q代表Quirks Modes 即混杂模式, S 代表 Standards Modes 即标准模式。关于模式的说明,请参见:
【分享】浏览器兼容性问题综述——正确的认识浏览器兼容性问题
子选择器
简介
选择一个特定父级元素的所有直接子级元素。子选择器由两个或两个以上的选择器,中间用 '>' 隔开。
例如:
div>span
它匹配 DIV 元素下所有的 SPAN 元素。
IE6 IE7(Q) IE8(Q)不支持子选择器
IE6 IE7(Q) IE8(Q)下,文本文字还是黑色。也就是说,这个选择器是无效的。
普通兄弟选择器
简介
选择指定元素后面的所有兄弟元素。
例:
IE6 IE7(Q) IE8(Q)不支持普通兄弟选择器
经测试,在IE6 IE7(Q) IE8(Q)下,文本文字还是黑色。证明,此选择器无效。
相邻兄弟选择器
简介
选择紧邻指定元素的兄弟元素。
相邻兄弟选择器通常含有的标志是:E1 + E2, E2是选择器的主题。 当E1和E2在文档树中含有相同的父节点,并且E2紧随E1时,E2被匹配,非元素节点会被忽略。
IE6 IE7(Q) IE8(Q)不支持相邻兄弟选择器
IE6 IE7(Q) IE8(Q)中,P中的 “Aloha!” 文字颜色没有变化,依然是黑色,因此可以推断出,它们不支持相邻兄弟选择器。
属性选择器
简介
属性选择器有以下四种方式:
* [att] : 选定设置了 att 属性的元素,不管设定的值是什么
* [att=val] : 选定 att 属性的值设置为 val 的元素
* [att~=val] : 表示一个元素拥有属性 att ,并且该属性含有空格分隔的一组值,其中之一为 'val'
* [att|=val] : 表示一个元素拥有属性 att ,并且该属性不含val或以 'val' 开头,后面紧邻 '-' (U+002D)
选择拥有指定属性的元素。
IE6 IE7(Q) IE8(Q)不支持属性选择器
结果,在IE6 IE7(Q) IE8(Q)中,没有变色。
总结
从上面可以看出,IE从IE7开始,才对一些高级选择器提供的支持。因此对子选择器,普通兄弟选择器,相邻兄弟选择器和属性选择器的支持情况如下图:
所以,大家在遇到这几个选择器的时候,应该好好考虑一下IE6中的替代方案。
希望对大家有帮助!!
对于这几个支持的不好的选择器我会一一说明,然后,举例。以下说明中,Q代表Quirks Modes 即混杂模式, S 代表 Standards Modes 即标准模式。关于模式的说明,请参见:
【分享】浏览器兼容性问题综述——正确的认识浏览器兼容性问题
子选择器
简介
选择一个特定父级元素的所有直接子级元素。子选择器由两个或两个以上的选择器,中间用 '>' 隔开。
例如:
div>span
它匹配 DIV 元素下所有的 SPAN 元素。
IE6 IE7(Q) IE8(Q)不支持子选择器
- HTML code
- <style type="text/css"> div>p { color: red; }</style><div> <p>Aloha!</p></div>
IE6 IE7(Q) IE8(Q)下,文本文字还是黑色。也就是说,这个选择器是无效的。
普通兄弟选择器
简介
选择指定元素后面的所有兄弟元素。
例:
- CSS code
- span ~ img
IE6 IE7(Q) IE8(Q)不支持普通兄弟选择器
- HTML code
- <style type="text/css"> div~p { color: red; }</style><div></div><p>Aloha!</p>
经测试,在IE6 IE7(Q) IE8(Q)下,文本文字还是黑色。证明,此选择器无效。
相邻兄弟选择器
简介
选择紧邻指定元素的兄弟元素。
相邻兄弟选择器通常含有的标志是:E1 + E2, E2是选择器的主题。 当E1和E2在文档树中含有相同的父节点,并且E2紧随E1时,E2被匹配,非元素节点会被忽略。
IE6 IE7(Q) IE8(Q)不支持相邻兄弟选择器
- HTML code
- <style type="text/css"> div+p { color: red; }</style><div></div><p>Aloha!</p><p>Hello!</p>
IE6 IE7(Q) IE8(Q)中,P中的 “Aloha!” 文字颜色没有变化,依然是黑色,因此可以推断出,它们不支持相邻兄弟选择器。
属性选择器
简介
属性选择器有以下四种方式:
* [att] : 选定设置了 att 属性的元素,不管设定的值是什么
* [att=val] : 选定 att 属性的值设置为 val 的元素
* [att~=val] : 表示一个元素拥有属性 att ,并且该属性含有空格分隔的一组值,其中之一为 'val'
* [att|=val] : 表示一个元素拥有属性 att ,并且该属性不含val或以 'val' 开头,后面紧邻 '-' (U+002D)
选择拥有指定属性的元素。
IE6 IE7(Q) IE8(Q)不支持属性选择器
- HTML code
- <style type="text/css"> p[id] { color: red; }</style><p id="aloha">Aloha!</p>
结果,在IE6 IE7(Q) IE8(Q)中,没有变色。
总结
从上面可以看出,IE从IE7开始,才对一些高级选择器提供的支持。因此对子选择器,普通兄弟选择器,相邻兄弟选择器和属性选择器的支持情况如下图:
所以,大家在遇到这几个选择器的时候,应该好好考虑一下IE6中的替代方案。
希望对大家有帮助!!
更多兼容性问题:【分享】浏览器兼容性问题目录
转自:http://topic.csdn.net/u/20100730/17/c708d399-f734-4200-aa3b-7c45c1df34ed.html
- 低版本IE对某些CSS选择器的支持缺陷
- bootstrap对低版本ie支持问题
- 让低版本的IE浏览器支持HTML5
- irefox和IE对某些css样式的认定区别
- IE低版本支持png 透明化
- 让低版本IE支持HTML5
- HTML5----IE低版本支持HTML5标签方法,css 浏览器网页兼容性
- CSS选择器IE支持情况汇总
- 让低版本IE浏览器支持CSS3属性
- Filter在IE低版本的写法
- 低版本的ie不支持trim()方法
- dataset兼容低版本IE的方法
- CSS选择器的浏览器支持
- CSS选择器的浏览器支持
- CSS选择器的浏览器支持
- CSS选择器的浏览器支持
- IE低版本(6-9)CSS hack
- iOS如何解决某些方法低版本不支持的问题
- Ext ComboBox 分页功能
- JDK 1.5(5.0)的新特性
- 驱动开发环境搭建
- C++:矩阵相乘
- 浅淡SQL中where 1=1和0=1的作用
- 低版本IE对某些CSS选择器的支持缺陷
- 由init、loadView、viewDidLoad、viewDidUnload、dealloc的关系说起
- VB.NET入门(五):数组,枚举与结构体
- 对手机上的文件进行操作
- Java C 实现Bellman-ford算法
- VC 切分窗口
- Linux 内核文件系统与设备操作流程分析
- 波音787 Dreamliner娱乐系统将选择Android
- Linux 信号signal处理机制