为何定制版IE11对同页面相似DOM样式修改代码表现不一致？

嘿，我来帮你拆解下这个IE11的兼容性坑！咱们从几个关键点入手排查，毕竟你已经有能正常工作的语言切换代码，说明核心逻辑没问题，大概率是细节上的IE专属限制在搞鬼：

1. Area标签的默认跳转行为在搞破坏 #

你的<area>标签里写了href="#"，在IE11里，点击区域时浏览器会优先执行跳转行为（哪怕是跳转到当前页面锚点），这会直接刷新页面，刚触发的showIt()效果瞬间就被冲没了。

解决办法：

• 在onClick里加上return false，阻止默认跳转：

  <area shape="rect" coords="0,289,537,345" href="#" onClick="showIt(); return false;">
  

• 或者干脆去掉href="#"，给area加个CSS样式让它看起来可点击：cursor: pointer，IE11里没有href的area也能正常触发onclick事件。

2. 元素ID和JS里的调用不匹配 #

你提到模态框是存于ID为pop的DIV中，但关闭函数里却用了document.getElementById("popUp")——这俩ID完全不一致啊！Chrome和Firefox可能有一些容错机制，但IE11对这种匹配错误零容忍，直接找不到元素就失效了。

另外，showIt()里直接用pop.style，依赖的是IE11“元素ID自动映射为全局变量”的特性，这个特性在严格模式下可能失效，还容易和其他变量冲突。建议显式获取元素更稳妥：

function showIt() {
  var modal = document.getElementById("pop");
  modal.style.visibility = "visible";
  modal.style.display = "block";
}

3. 关闭函数的语法不完整 #

你粘贴的关闭函数最后少了一个闭合的}，JS语法错误在IE11里会直接导致整个函数失效，甚至影响其他JS代码运行。修正后的完整代码应该是：

document.getElementById("popOff").onclick = function() {
  var modal = document.getElementById("pop");
  modal.style.visibility = "hidden";
  modal.style.display = "none";
};

4. IE11对style属性的读取限制 #

IE11中，如果元素的初始样式是通过外部样式表或<style>标签设置的，直接通过element.style.visibility读取可能返回空字符串（因为style属性只对应内联样式）。你可以把模态框的初始隐藏状态改成内联样式，确保JS能正确覆盖：

<div id="pop" style="visibility: hidden; display: none;">
  <!-- 模态框内容 -->
</div>

总结修改步骤 #

1. 给area标签的onclick事件加上return false，阻止默认跳转；
2. 统一模态框的ID，在JS里显式获取元素，别依赖全局变量映射；
3. 补全关闭函数的语法，确保没有遗漏闭合括号；
4. 把模态框的初始隐藏状态改成内联样式。

按照这个思路调整后，应该就能在IE11里正常工作了，同时Chrome和Firefox的功能也不会受影响～

内容的提问来源于stack exchange，提问作者Steve Gosling