CSS在IE6IE7和IE8中的差别介绍( 二 )


支持情况
IE6
NoIE7
YesIE8
Yes链伪类
示例
【CSS在IE6IE7和IE8中的差别介绍】a:first-child:hover {
color: #0f0;
}
描述
伪类可以链起来以缩小元素选择 。上面的例子会定位每一个父级元素下的第一个a标签,并将hover伪类P应用到它上 。
支持情况
IE6
NoIE7
YesIE8
Yes非锚点元素中的:hover
示例
div:hover {
color: #f00;
}
描述
:hover伪类可以应用到任何元素的悬停状态,而不只是a标签 。
支持情况
IE6
NoIE7
YesIE8
Yes:first-child伪类
示例
div li:first-child {
background: blue;
}
描述
改伪类定位每一个指定的元素的父级元素的第一个子元素 。
支持情况
IE6
NoIE7
YesIE8
YesBugs
IE7中,如果要定位的第一个子元素之前有HTML注释,first-child伪类将会无效 。
:focus伪类
示例
a:focus {
border: 1px solid red;
}
描述
该伪类定位有键盘焦点的所有元素 。
支持情况
IE6
NoIE7
NoIE8
Yes:before 和:after 伪类
示例
#box:before {
content: "本段文字在盒子前面";
}
#box:after {
content: "本段文字在盒子后面";
}
描述
这两个伪元素分别在指定元素的前面和后面添加生成的内容,结合content属性一起使用 。
支持情况
IE6
NoIE7
NoIE8
Yes属性支持
由position产生的实际大小
示例
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}
描述
定义top, right, bottom, 和left 值到绝对定位的元素上将给这个元素实际的大小(宽度和高度),虽然并没有设定使宽度和高度值 。
支持情况
IE6
NoIE7
YesIE8
YesMin-Height 与 Min-Width
示例
#box {
min-height: 500px;
min-width: 300px;
}
描述
这两个属性分别指定元素的宽和高的最小值,允许一个盒子可以比指定的最小值更大,但是不能更小 。它们两个可以一起使用,也可以分开来用 。
支持情况
IE6
NoIE7
YesIE8
YesMax-Height 和Max-Width
示例
#box {
max-height: 500px;
max-width: 300px;
}
描述
这两个属性分别指定元素的高和宽的最大值,允许一个盒子比这个指定的最大值小,但是不能更大 。它们也可以同时使用或者单独使用 。
支持情况
IE6
NoIE7
YesIE8
Yes透明边框颜色
示例
#box {
border: solid 1px transparent;
}
描述
一个透明的边框色允许一个边框和边框色可见(或者不透明)时占用一样的空间 。
支持情况
IE6
NoIE7
YesIE8
Yes固定位置元素
示例
#box {
position: fixed;
}
描述
position属性的这个值允许一个元素绝对的相对于窗口定位 。
支持情况
IE6
NoIE7
YesIE8
Yes固定位置的背景图
示例
#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}
描述
background-attachment属性的值为fixed允许一个背景图片绝对地相对于窗口定位 。
支持情况
IE6
NoIE7
YesIE8
YesBugs
就像position:fixed一样,IE6同样不支持background-positon的fixed值。然而,在IE6中只有在这个值用于根元素的时候才有效 。
属性值“inherit”
示例
#box {
display: inherit;

推荐阅读