javascript - 为什么 Internet Explorer 不能以一致的方式处理相同的代码？

Question

我目前正在为混合了浏览器访问的旧环境开发 Web 应用程序。虽然将使用正在开发的网站的大部分客户都能够使用 Chrome 和 Firefox，但仍有一部分客户受限于使用 Internet Explorer（IE11 的修改版本）。这也是一个多网络学习环境（用户将访问两个不同的广域网和他们自己的 Internet 计算机上的站点），WAN 网络对可以下载的内容有自己的限制，并且对如何使用脚本有限制。适应这些要求很有趣。

关键是让事情变得简单。穴居人级别简单。仅限 HTML、Javascript 和 CSS。没有 API，没有 JQuery。只需尽可能简单的代码，为 IE 开发，希望它在其他地方仍然可以正常工作。到目前为止，我已经设法拼凑出一些小奇迹（鉴于我生疏的技能），包括一些不同的图像库、小型现场动画，以及除了普通外观/感觉音频播放器上的进度条之外的所有内容。我现在面临着最荒谬的停顿点：内联模态样式显示。

在这种情况下，客户端希望在用户单击窗口的映射区域时打开一个小对话框：

MODAL 元素不起作用，所以我在一个矩形上放置了一个快速段落，在另一个段落中放置了一个 X 来关闭它（穴居人在这里写岩画）。要显示的所有内容都存储在名为 DIV 的 DIV 中，该 DIVpop,默认隐藏在样式表中。当用户点击屏幕上图像的映射区域时，它被设置为取消隐藏：

<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 中工作，但在 Internet 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 中适用于一个应用程序，但在同一页面上却不行？

标签： javascriptcssinternet-explorercross-platform