我遇到了一个非常奇怪的错误,它只适用于 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 机器来测试它
如果您使用上述小提琴并将 inline-block 元素转换为块元素,您可以看到指针事件再次起作用