ich auf eine sehr seltsame Fehler gekommen sind, die nur auf Windows IE11 gilt 7:Zeiger Ereignisse mit inline-block auf IE11 windows 7
Wenn pointer-events: none an ein übergeordnetes Element Anwendung pointer-events:auto nicht auf einem Element arbeiten mit das heißt display:inline-block
es auf Windows 8 passieren kann, aber es scheint behoben haben sich auf Windows 10.
Unten ist ein Beispiel Schnipsel von dem, was ich meine, Sie auf dem Bildschirm, wenn hellblau leuchtet sehen können je es ist schwebend. Ich habe die Zeiger-Ereignisse für alles entfernt und dann für das grüne Feld und die undurchsichtige weiße Brotkrumen-Liste wieder eingeschaltet.
können Sie sehen die grüne Box schaltet hat einen eigenen Zeiger Ereignisse ist (Drehen Sie den Hintergrund zurück zu dunkelblau), wo als die Brotkrümel völlig ignoriert
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>Gibt es trotzdem zu bekommen diese inline-block mit ie11 auf Windows 7 (und vielleicht Windows 8) zu arbeiten?
ps Ich habe Browser-Stack verwendet, um dies zu testen und es funktionierte ordnungsgemäß auf dem Setup, das ich beschrieben habe, also nicht sicher, ob dies nur auf einem Laptop lokalisiert ist, da ich keine anderen Windows 7-Maschinen zum Testen haben
Here is a fiddle I have messed around with
Wenn Sie die oben Geige verwenden und drehen Sie das Inline-Block-Element auf ein Blockelement, können Sie die Zeiger Ereignisse sehen wieder arbeiten