CSS在Internet Explorer 6, 7 和8中的差别(2)
作者：互联网
2010-03-12
WEB标准化
2、伪类和伪元素
A、 :hover后面的后代选择器
示例
| a:hover span { color: #0f0; } |
描述
一个元素可以被:hover伪类后面的选择器定位，就像后代选择器一样。上面的例子，在鼠标悬停的时候，将会改变a元素内的span元素中的文字的颜色。
支持情况
| IE6 No IE7 Yes IE8 Yes |
B、 链伪类
示例
| a:first-child:hover { color: #0f0; } |
描述
伪类可以链起来以缩小元素选择。上面的例子会定位每一个父级元素下的第一个a标签，并将hover伪类P应用到它上。
支持情况
| IE6 No IE7 Yes IE8 Yes |
C、 非锚点元素中的:hover
示例
| div:hover { color: #f00; } |
描述
:hover伪类可以应用到任何元素的悬停状态，而不只是a标签。
支持情况
| IE6 No IE7 Yes IE8 Yes |
D、 :first-child伪类
示例
| div li:first-child { background: blue; } |
描述
改伪类定位每一个指定的元素的父级元素的第一个子元素。
支持情况
| IE6 No IE7 Yes IE8 Yes |
Bugs
IE7中，如果要定位的第一个子元素之前有HTML注释，first-child伪类将会无效
E、 :focus伪类
示例
| a:focus { border: 1px solid red; } |
描述
该伪类定位有键盘焦点的所有元素。
支持情况
| IE6 No IE7 No IE8 Yes |
F、 :before 和:after 伪类
示例
| #box:before { content: "本段文字在盒子前面"; } #box:after { content: "本段文字在盒子后面"; } |
描述
这两个伪元素分别在指定元素的前面和后面添加生成的内容，结合content属性一起使用。
支持情况
| IE6 No IE7 No IE8 Yes |
3、属性支持
A、由position产生的实际大小
示例
| #box { position: absolute; top: 0; right: 100px; left: 0; bottom: 200px; background: blue; } |
描述
定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度)，虽然并没有设定使宽度和高度值。
支持情况
| IE6 No IE7 Yes IE8 Yes |
B、Min-Height 与 Min-Width
示例
| #box { min-height: 500px; min-width: 300px; } |
描述
这两个属性分别指定元素的宽和高的最小值，允许一个盒子可以比指定的最小值更大，但是不能更小。它们两个可以一起使用，也可以分开来用。
支持情况
| IE6 No IE7 Yes IE8 Yes |
C、Max-Height 和Max-Width
示例
| #box { max-height: 500px; max-width: 300px; } |
描述
这两个属性分别指定元素的高和宽的最大值，允许一个盒子比这个指定的最大值小，但是不能更大。它们也可以同时使用或者单独使用。
支持情况
| IE6 No IE7 Yes IE8 Yes |
相关标签:
相关推荐
