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

Question

我遇到了一个非常奇怪的错误，它只适用于 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 台机器进行测试

Here is a fiddle I have messed around with

如果你使用上面的fiddle并将内联块元素变成块元素，你可以看到指针事件再次起作用

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！呜呜呜！

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

pointer events with inline-block on ie11 windows 7

css

internet-explorer-11

pointer-events