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

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

这里是jsFiddle。

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

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

来源

2014-01-26 CookieMonster

也许http://stackoverflow.com/a/5594589/1256925和特别是http://stackoverflow.com/a/17211251/1256925是与这个问题有关。 – Joeytje50

假设这是一个渲染错误，我非常怀疑纯CSS中的解决方案。如果有一个父选择器，那么会有一个解决方法，但是目前情况并非如此。永远的东西，IE ..不错的发现:) –

@JoshC我不认为有一个纯粹的CSS解决方案，但至少有一个解决方法（虽然它也改变了它的样子）。我同意，不错的发现。尽管IE10/11比以前的版本要好很多，但仍然存在很多问题。 – Joeytje50

你可以这样做的一种方法是使用嵌套<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上工作是没有成本的。

来源

2014-01-26 03:39:24 Joeytje50

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

这也可以通过将在<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

来源

2015-02-12 04:58:23 Brian

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

回答

相关问题