IE 8-10 で、親のアクティブ状態がトリガーされないという厄介なバグを発見しました。親要素の子がクリック イベントのターゲットである場合、親要素のアクティブ状態はトリガーされないようです。
これが実際の例です。要素内のテキストをクリックしても、<li>色は変わりません。<li>子要素以外の場所をクリックする<p>と、要素が青色に変わります。
要素に子がある場合、IE で css :active 疑似状態がほとんど役に立たなくなるため、これは問題です。
以前にこの問題に遭遇した人はいますか?
簡単な回避策は次のとおりです。CSS ルールを段落に追加します。
CSS
ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
子要素をクリックして、親のアクティブ状態を実行するときに、javascript または jquery を使用することをお勧めします。
<p>タグに別の CSS セレクターを追加して、
li:active { background: blue; }
となります
li:active, li p:active { background: blue; }