css ie8第一个孩子和最后一个孩子

Question

大家好我有以下..

.selected2:first-child{
   background: url(../img/css/first-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2{
   background: url(../img/css/second-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}
.selected2:last-child{
   background: url(../img/css/third-selected.png) no-repeat !important;
   background-position: center center !important;
   box-shadow: inset 1px 1px 5px 2px rgba(221,221,221,1) !important;
}

它在ie9,chrome,opera,firefox中工作得很完美......但在ie8中我只得到每个li元素的第二个背景.

问题是什么？ie8不支持第一个孩子？

Answer 1

这里有两个问题:首先是:last-child选择器,其次是RGBA背景颜色.

1. IE8不支持:last-child.(:first-child虽然支持)

   您可以在Quirksmode.org上看到这些(以及所有其他CSS选择器)的浏览器支持.

   如果您需要IE8支持,最快捷,最简单的处理方法就是将类添加到相关元素中,并以相应方式设置样式.这是老式的做事方式,但IE8是一种老式的浏览器.

   如果您确实需要使用选择器:last-child,并且您确实需要支持IE8,那么您可以尝试使用Javascript解决方案:

   • http://selectivizr.com/ - 这是一个JS库,它为旧的IE版本添加了对一堆CSS选择器的支持.它还要求你使用另一个lib,比如jQuery,它用来做艰苦的工作.

   • https://code.google.com/p/ie7-js/ - 这是一个JS库,它试图修补旧的IE版本,以尽可能多地修复错误和怪癖,并回填尽可能多的缺失功能.可能.它的功能范围非常广泛.它确实包含了大多数高级CSS功能.

   :last-child除非您关闭了JS用户,否则这些库中的任何一个都应该为您添加支持.

2. 但是正如我所说,IE8确实支持:first-child,因此缺少选择器并不是你的代码在这种情况下无法工作的原因.您的CSS不适用的原因:first-child是因为您使用RGBA颜色作为背景.IE8不支持RGBA颜色.

   为此,唯一可用的解决方案是名为CSS3Pie的JS库.这为IE6/7/8增加了各种CSS3功能,包括RGBA颜色支持(尽管程度有限;它并不能完成所有工作).