Как предотвратить утечку событий через наложенный элемент в IE?

Учитывая следующий HTML:

    

    

​

... и CSS:

.with-shield {
  position: relative;   
}

.shield {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;   
  z-index: 100;
}

( Fiddle).

FireFox и Chrome не позволяют щелкнуть переключатель (поскольку .shieldрасположен над ним), однако IE9 (и, как я предполагаю, более старые версии) позволяет (даже несмотря на то, что инструменты разработчика показывают .shieldправильно установлен).

Как я могу изменить CSS, чтобы позволить .shieldпоглощать события щелчка (т. е. запретить пользователю выбирать радио) в IE?

Мне это нужно, поскольку я представляю результаты опроса клиентов сотрудникам, просто повторно отображая форму просмотра; Я хочу добавить наложение, чтобы предотвратить случайное изменение значений сотрудниками (я уже отключил tabIndex и т. д.).