Question

我遇到了一个非常奇怪的错误，只适用于Windows 7上的ie11：

将pointer-events: none应用于父元素时，pointer-events:auto将不会对display:inline-block

的元素起作用

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

下面是我的意思的一个示例片段，你可以看到屏幕在悬停时会变成浅蓝色。我删除了所有内容的指针事件，然后将其重新打开以获取绿色框和不透明的白色面包屑列表。

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

有没有让这个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！ Grrrrr！

在ie11窗口7上使用内联块的指针事件

1 个答案: