Question

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

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

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

Answer 1

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

li {
    position: relative;
}

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

伪元素是<li>的一部分，因此点击将发生在<li>而不是<img>触发子项的活动状态。有关详细信息：see this post

Answer 2

您可以这样做的一种方法是使用<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工作是免费的。

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

2 个答案: