pointer events with inline-block on ie11 windows 7

Question

I have come across a very strange bug that only applies to ie11 on windows 7:

When applying pointer-events: none to a parent element, pointer-events:auto will not work on an element with that is display:inline-block

It may happen on windows 8 too but it seems to have fixed itself on Windows 10.

Below is an example snippet of what I mean, you can see the screen will turn light blue when ever it is hovered. I have removed the pointer events for everything and then turned it back on for the green box and the opaque white breadcrumb list.

You can see the green box turns has it's own pointer events (turning the background back to dark blue) where as the breadcrumb is totally ignored

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>

Is there anyway to get this inline-block to work with ie11 on windows 7 (and maybe windows 8)?

ps I have used browser stack to test this and it worked properly on the setup I have described, so not sure if this is just localised to one laptop as I don't have any other windows 7 machines to test it on

Here is a fiddle I have messed around with

If you use the above fiddle and turn the inline-block element to a block element, you can see the pointer events work again

Answer 1

Luckily I have not used inline-block for centering the content but just so the element is able to be padded around the content.

This has meant that I can go back old school (in the days before inline-block) and float the element and make it 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>

All I have to add to this is... stupid IE! Grrrrr!