ie11 windows 7上带有内联块的指针事件

Question

我遇到了一个非常奇怪的 bug，它只适用于 windows 7 上的 ie11：

当将pointer-events: none 应用于父元素时，pointer-events:auto 将不适用于具有display:inline-block 的元素

它也可能发生在 Windows 8 上，但它似乎已经在 Windows 10 上修复了。

下面是我的意思的示例 sn-p，您可以看到屏幕在悬停时会变成浅蓝色。我已删除所有内容的指针事件，然后为绿色​​框和不透明的白色面包屑列表重新打开它。

您可以看到绿色框转有它自己的指针事件（将背景转回深蓝色），因为面包屑被完全忽略

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 机器来测试它

Here is a fiddle I have messed around with

如果你使用上面的小提琴并将 inline-block 元素转换为块元素，你可以看到指针事件再次起作用

Answer 1

幸运的是，我没有使用 inline-block 来使内容居中，只是为了使元素能够在内容周围填充。

这意味着我可以回到老学校（在 inline-block 之前的日子）并浮动元素并使其阻塞：

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:after {
  content: '';
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}
.breadcrumb-list {
  list-style: none;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  display: block;
  float: left;
  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>

我要补充的是......愚蠢的IE！呸呸呸！