IE 11：アクティブなCSSセレクタが子要素によってブロックされ、アクティブなCSSセレクタの兄弟が選択されていない

span要素がdiv要素内にあります。
divの背景色は、divまたはspanのいずれかをクリックすると変更されます。
これはIE11以外のすべてのブラウザで機能しています。、このためのコードスニペットを見つけてください

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>IE11 :active issue</title> 
 
    <style> 
 
     .parent {} 
 
     
 
     .child { 
 
      width: 100px; 
 
      pointer-events: none; 
 
      background-color: aqua; 
 
     } 
 
     
 
     .parent:active { 
 
      background-color: red; 
 
     } 
 
     
 
     .child:active { 
 
      background-color: red; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="parent"> 
 
     <span class="child">Click Me</span> 
 
    </div> 
 
</body> 
 

 
</html>

*私は、このために周りのすべての作業を提案してください。

出典

2017-08-31 user3860630

子要素でdisplay: inline-blockを使用する場合は、IE11にpointer-events: noneが強制的に設定されていると認識させることができます。とにかくそれを使用する必要があります。<span>はデフォルトでインライン要素であり、明示的な幅（この場合は100px）を定義することはできません。

.parent {} 
 

 
.child { 
 
    display: inline-block; 
 
    width: 100px; 
 
    pointer-events: none; 
 
    background-color: aqua; 
 
} 
 

 
.parent:active { 
 
    background-color: red; 
 
} 
 

 
.child:active { 
 
    background-color: red; 
 
}

<div class="parent"> 
 
    <span class="child">Click Me</span> 
 
</div>

出典

2017-08-31 07:11:11 Terry

IE 11：アクティブなCSSセレクタが子要素によってブロックされ、アクティブなCSSセレクタの兄弟が選択されていない

答えて

関連する問題