css - 单击子项不会触发父项的 :active state in IE

Question

我在 IE 8-10 中发现了一个恼人的错误，它阻止了父级的事件状态被触发。看起来，如果父元素的子元素是点击事件的目标，则不会触发父元素上的事件状态。

Here is a working example .如果单击 <li> 内的文本该元素不会改变颜色。如果您在 <li> 中单击除 <p> 以外的任何地方子元素将变为蓝色。

这是一个问题，因为如果元素有任何子元素，它几乎会使 IE 中的 css:active 伪状态变得无用。

有没有人以前遇到过这个问题，甚至找到了解决方法？

Answer 1

这里有一个简单的解决方法:向段落添加一个 css 规则。

Working example

CSS

ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}