CSS :active 选择器忽略 IE 中子元素的状态答案

【问题标题】：CSS :active selector ignores the state of child elements in IECSS :active 选择器忽略 IE 中子元素的状态
【发布时间】：2014-02-17 00:20:04
【问题描述】：

在 Webkit 浏览器中，如果子元素处于活动状态，CSS :active 选择器似乎也可以工作。另一方面，IE 浏览器（我用 IE 10 和 11 测试过）会忽略孩子的状态。

这里是jsFiddle。

如果您在 IE 中单击图像，则没有任何反应。在 Chrome 中，应用了 li:active 和 li:active > img 的 CSS 规则。

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

【问题讨论】：

也许stackoverflow.com/a/5594589/1256925 尤其是stackoverflow.com/a/17211251/1256925 与这个问题有关。
假设这是一个渲染错误，我非常怀疑纯 CSS 中是否有任何解决方案。如果有父选择器，就会有解决方法，但目前情况并非如此。总有一些东西，IE.. 很好的发现:)
@JoshC 我也不认为有一个纯 CSS 解决方案，但至少有一个解决方法（尽管它也改变了它的外观）。不过我同意，很好的发现。尽管 IE10/11 比以前的版本好很多，但它仍然有很多问题。

标签： css css-selectors

【解决方案1】：

您可以这样做的一种方法是不要使用嵌套的<img> 标签，而只需使用background-image。然后，您可以设置 background-position 以使 background-image 位于正确的位置，然后将所需的样式应用于 li 本身。比如你可以this:

li {
    border: 1px solid black;
    margin: 10px;
    padding: 10px;
    float: left;
    background-repeat:no-repeat;
    background-position:10px 10px;
}

li:active {
    background-color: rgba(0,0,0,0.8);
    opacity:0.3;
}

我在该演示中为 background-image 和 width/height 样式使用了内联样式，因为我假设您希望为每个 li 使用不同的图像。

此解决方法可能与原始解决方法不完全相同，但没有人说让您的网站在 IE 上运行是免费的。

【讨论】：

这是个好主意。我无法修改 HTML 的结构，因此这不是我正在寻找的确切答案。但似乎我真的需要更改 HTML 或使用 JavaScript。如果没有更好的答案，我会接受你的答案。谢谢！

【解决方案2】：

这也可以通过在<li> 上方的<img> 上放置一个伪元素层来解决，如下所示：

li {
    position: relative;
}

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

伪元素是<li> 的一部分，因此点击将发生在<li> 而不是<img> 触发子项的:active 状态。欲了解更多信息：see this post

【讨论】：