Windows 7 の ie11 にのみ適用される非常に奇妙なバグに遭遇しました。
pointer-events: none
親要素に適用する場合pointer-events:auto
、それを持つ要素では機能しませんdisplay:inline-block
Windows 8でも発生する可能性がありますが、Windows 10では修正されたようです。
以下は、私が言いたいことのスニペットの例です。ホバーすると、画面が水色に変わることがわかります。すべてのポインター イベントを削除してから、緑色のボックスと不透明な白いパンくずリストのポインター イベントをオンに戻しました。
緑色のボックスが独自のポインター イベント (背景を濃い青色に戻す) を持っていることがわかります。パンくずリストは完全に無視されます。
html,
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#total {
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
display: block;
}
#total:hover {
background: lightblue
}
.no-pointer {
position: absolute;
left: 20px;
top: 150px;
width: 200px;
height: 200px;
border: 1px solid red;
z-index: 2;
pointer-events: none;
}
.pointer {
position: relative;
width: 100px;
height: 100px;
pointer-events: auto;
background: green;
display: block;
}
#breadcrumb {
position: absolute;
top: 20px;
left: 0;
right: 0;
max-width: 500px;
margin: auto;
width: 100%;
pointer-events: none;
z-index: 2;
}
.breadcrumb-list {
list-style: none;
background-color: #ffffff;
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
padding: 1em 50px;
pointer-events: auto;
}
.list-item {
display: inline-block;
}
<a id="total" href="#"></a>
<div class="no-pointer">
<a href="#" class="pointer"></a>
</div>
<div id="breadcrumb">
<ol class="breadcrumb-list">
<li class="list-item home-crumb">
<a class="crumb" href="#1">
<span>Home</span>
</a>
</li>
<li class="list-item">
<a class="crumb" href="#2">
<span>Test</span>
</a>
</li>
<li class="list-item">
<a class="crumb" href="#3">
<span>Test 2</span>
</a>
</li>
</ol>
</div>
これinline-block
をWindows 7(およびおそらくWindows 8)でie11で動作させる方法はありますか?
psブラウザスタックを使用してこれをテストしましたが、説明したセットアップで適切に機能しました。テストするWindows 7マシンが他にないため、これが1つのラップトップにローカライズされているだけかどうかはわかりません
上記のフィドルを使用してインラインブロック要素をブロック要素にすると、ポインターイベントが再び機能することがわかります