CSS：活动选择器忽略IE中子元素的状态

在Webkit浏览器中，如果子元素处于活动状态，CSS

：active

选择器似乎也能工作。另一方面，IE浏览器（我用IE10和IE11测试过）忽略了孩子们的状态

这是你的电话号码

如果你点击IE中的图片，什么都不会发生。在Chrome中，应用了

li:active

和

li:active>img

的CSS规则

---

如何在IE中仅使用CSS/CSS3获得相同的行为？

一种方法是使用嵌套的

标记，而不是使用

背景图像
。然后，只需设置
背景位置
，使
背景图像
位于正确的位置，然后将所需样式应用于
li
本身。例如，您可以执行以下操作：

我在那个演示中使用了
背景图像
和
宽度/高度
样式的内联样式，因为我假设您希望为每个
li
使用不同的图像

此解决方案可能与原始解决方案不完全相同，但没有人说让您的站点为IE工作是免费的。
这也可以通过在
上方的
上放置伪元素层来解决，如下所示：

li {
    position: relative;
}

li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

伪元素是
的一部分，因此单击将发生在
上，而不是触发子项的：活动状态的
。更多信息：
可能，尤其是与此问题相关的。假设这是一个渲染错误，我高度怀疑纯CSS中是否有任何解决方案。如果有一个父选择器，就会有一个解决方案，但目前情况并非如此。总是有些事。。很好的发现：）@JoshC我也不认为有一个纯粹的CSS解决方案，但至少有一个解决办法（尽管它也改变了它的外观）。不过我同意，很好的发现。尽管IE10/11比以前的版本要好得多，但它仍然有很多地方出了问题。这是个好主意。我不能修改HTML的结构，所以这不是我想要的确切答案。但看起来我真的需要更改HTML，或者使用JavaScript。如果没有更好的答案，我会接受你的答案。谢谢
li {
    position: relative;
}

li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}