0

大家好，我有以下..

.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不支持一胎？

4

3 回答 3

7

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

  1. IE8 不支持:last-child。（虽然它确实支持:first-child）

    您可以在 Quirksmode.org上查看浏览器对这些（以及所有其他 CSS 选择器）的支持。

    如果您需要 IE8 支持，那么最快和最简单的处理方法就是简单地将类添加到相关元素并以这种方式设置它们的样式。这是老式的做事方式，但 IE8 是老式的浏览器。

    如果你真的需要使用选择器:last-child，并且你真的需要支持 IE8，那么你可以尝试以下 Javascript 解决方案：

    • http://selectivizr.com/ -- 这是一个 JS 库，它为旧 IE 版本添加了对一堆 CSS 选择器的支持。它还要求您使用另一个库（例如 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 颜色支持（尽管在有限的范围内；它并不能做所有事情）。

于 2013-03-22T16:10:14.170 回答
1

IE8 及更低版本不支持这些伪类。有一个 Javascript 工具可以使 IE7 和 IE8 的行为更接近 IE9，并增加了对第一个和最后一个子级的支持。

https://code.google.com/p/ie7-js/

在下载的文件中，你会发现 IE7.js IE8.js 和 IE9.js 只是使用了 IE9.js 它包含了另外两个...

于 2013-03-22T15:19:06.813 回答
1

如前所述，您不能使用:last-child伪类，但您可以使用.selected2 + .selected2等来定位您需要的类。

于 2013-08-12T08:07:07.693 回答