1

这是一个奇怪的问题。http://www.madebypaz.com/profile<OL>上的图表使用伪元素进行图表注释（ABC 和图像）。我为此使用相邻的兄弟选择器，如下所示：:before

#profiletext ol li:before {
    content: 'A';
    }

#profiletext ol li+li:before {
    content: 'B';
    }

#profiletext ol li+li+li:before {
    content: 'C';
    }

#profiletext ol li+li+li+li:before {
    content: '';
    }

#profiletext ol li+li+li+li {
    background: url('/wp-content/themes/paz2010/images/sweet-spot.png') no-repeat;
    margin-left: 0;
    padding-left: 38px;
    }

#profiletext ol li {
    height: 30px;
    margin-left: 10px;
    }

这可能不是最优雅的解决方案，但它在包括 Chrome 在内的所有浏览器中都能完美运行，直到有人向我指出它在 Chrome 10 中出现故障。在 Chrome 10 中，它显示 AAA 并在鼠标悬停时更改为正确的字符。这很奇怪，因为甚至没有定义 :hover 样式！

这是一个屏幕录像：http ://cl.ly/0E170v1Z0O2E0f3F0j0d

为什么会发生这种情况，我该如何解决？有没有更好的方法来达到相同的结果？

任何指针都非常感谢！

4

1 回答 1

0

这在 Chrome 16 上按预期工作 - 需要一个简单的更新。

于 2011-12-12T16:49:38.027 回答