В Internet Explorer div без цвета фона не блокирует взаимодействие мыши с элементами под ним. Это неправильно?

Question

Иногда я "защищаю" пользовательский элемент управления пользовательского интерфейса, помещая поверх него прозрачный элемент div. например, я создал интерактивную сетку данных, и когда я хочу ее отключить, например, когда я открываю перед ней диалог, я добавляю прозрачный div к внешнему контейнеру сетки с растянутыми по высоте и ширине, чтобы он не возможно ни на что нажать. В надуманном примере ниже someFunction() не будет вызываться при нажатии, где "Blah", потому что промежуток будет закрыт прозрачной защитой.

HTML:

<div class="control">
  <span class="clickable-example" onclick="someFunction()">Blah</span>
  <div class="protector"></div>
</div>

CSS:

.control {
  position: absolute;
  width: 100px;
  height: 20px;
}

.clickable-example {
  z-index: 0;
}

.protector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  z-index: 1;
  background: transparent;
}

Тем не менее, я заметил, что в Internet Explorer (даже 10) это не работает. Кажется, что div с фоном, установленным на прозрачный (либо явно с CSS, либо неявно, вообще не устанавливая его), div не блокирует то, что находится под ним. Я думал, что это неправильно, но я не могу понять из спецификации, что это неправильно. В спецификации просто сказано, что то, что находится внизу, будет "просвечивать". Здесь не сказано, должен ли фон действовать как кусок стекла.

Я вернулся к использованию полностью прозрачного изображения вместо прозрачного div, но мне было интересно, есть ли у кого-нибудь дополнительная информация по этому вопросу. (Тот факт, что он работает с прозрачным изображением, доказывает, что это не проблема z-индекса).