Почему Internet Explorer не обрабатывает один и тот же код согласованным образом?

Question

В настоящее время я занимаюсь разработкой веб-приложений для устаревшей среды со смешанным доступом к браузеру.Хотя большинство клиентов, которые будут использовать разрабатываемые сайты, могут использовать Chrome и Firefox, существует сегмент, ограниченный использованием Internet Explorer (модифицированная версия IE11).Это также многосетевая обучающая среда (пользователи получат доступ к сайтам в двух разных глобальных сетях и на своих собственных компьютерах в Интернете), где сеть WAN имеет свои ограничения на загрузку и ограничения на использование сценариев.Было ... интересно адаптироваться к этим требованиям.

Ключ был в том, чтобы все было просто.Пещерный уровень прост.Только HTML, Javascript и CSS.Нет никаких API, нет JQuery.Просто напишите как можно более простой код, разработанный для IE, с надеждой на то, что он все еще работает в других местах.До этого момента мне удавалось собрать воедино некоторые маленькие чудеса (учитывая мои ржавые навыки), включая несколько различных галерей изображений, незначительную анимацию на сайте и все, кроме индикатора прогресса на обычном аудиоплеере.Теперь я сталкиваюсь с самым нелепым моментом: показ мод в линейном режиме.

Клиент в этом случае хочет, чтобы при открытии небольшого диалога пользователь нажимал на отображенную область окна:

Элемент MODAL не работает, поэтому я объединил быстрый абзац над прямоугольником с X в другом абзаце, чтобы закрыть его (пещерный человек пишет здесь петроглифы).Все для отображения хранится в DIV с именем pop,, который по умолчанию скрыт в таблице стилей.Когда пользователь нажимает на отображенную область изображения на экране, он устанавливается в режим отображения:

<img id="popIt" src="assets/001_01_IM_04B.jpg" alt="" width="537" height="345" usemap="#TDLTable">
<map name="TDLTable">
        <area shape="rect" coords="0,289,537,345" href="#" onClick="showIt()">
</map> 

Функция showIt () так же проста:

pop.style.visibility = "visible";
pop.style.display = "block";

В порядкечтобы закрыть диалог, при щелчке по абзацу X вызывается событие:

document.getElementById("popOff").onclick = function() {
document.getElementById("popUp").style.visibility = "hidden";
document.getElementById("popUp").style.display = "none";

Разница в коде - результат попыток обхода, и чтобы доказать, что оба метода работают вне IE.Все это, как бы это ни было, работает в Chrome и Firefox в сетях, которыми я вынужден пользоваться, но в Internt Explorer ничего не делает.Меня поразило то, что существующий код, с которым я работаю, имеет аналогичное значение для переключения между языками.Он использует формат:

function toggleLang() {
 if(document.getElementById("toggleEnglish").style.visibility == "visible" ) {
  document.getElementById("toggleEnglish").style.visibility = "hidden";
  document.getElementById("toggleEnglish").style.display = "none";
  document.getElementById("toggleFrench").style.visibility = "visible"; 
  document.getElementById("toggleFrench").style.display = "block"; }
 else {
  document.getElementById("toggleFrench").style.visibility = "hidden";
  document.getElementById("toggleFrench").style.display = "none";
  document.getElementById("toggleEnglish").style.visibility = "visible"; 
  document.getElementById("toggleEnglish").style.display = "block"; }
}

Учитывая, что приведенный выше код работает, и я использую те же вызовы для моего собственного кода, есть что-то, что я пропускаю?Почему изменения видимости и отображения работают в IE для одного приложения, а не для другого на той же странице?