JS 跨浏览器兼容性问题答案

【问题标题】：JS Cross Browser Compatibility IssueJS 跨浏览器兼容性问题
【发布时间】：2014-10-23 12:30:22
【问题描述】：

这段代码在 Chrome 中运行良好，但在 Firefox 或 IE 中却不行。

<script>
$(document).ready(function(){
    var currentOne=$("#instructions");
    currentOne.addClass("visibleLabel");

    $('map area').mousemove(function(e) {
        $(currentOne).removeClass("visibleLabel");
        currentOne = '#' + $(this).data('label');
        $(currentOne).addClass("visibleLabel");
    });

});
</script>

<img src="http://greenparty.org.uk/assets/images/site_graphics/national/greenmap.png"
    usemap="greenuk" id="theGreenMap">

<map name="greenuk">
    <area shape="poly" id="region-southeast"
          data-label="southeast" coords="256,485,262,486,285,542,301,531,344,536,349,547,298,577,263,574,234,587,205,577,202,562,216,513,214,499,247,498"
          alt="southEast" href="south-east" />
    <!-- etc. -->
</map>

这里是 JS Fiddle：http://jsfiddle.net/ve9hywdq/1/ 如果您在 Firefox 中尝试，您将无法点击您想要的地图部分，但在 Chrome 中您可以。

【问题讨论】：

用小提琴来测试一下怎么样？
哪个部分不工作？
萌，尝试在各自的浏览器中使用debuggers 看看发生了什么……也许它在 Chrome 中出现问题，但 Chrome 更宽容。对 Chrome 调试器、FireFox Firebug（需要安装）和 IE 的调试器使用 F12，并检查控制台选项卡中是否出现错误。请同时提供一个小提琴，以便我们可以看到正在运行的代码。还为您的问题添加更多上下文，例如a) what your code's goal is、b) what's not working, 和 c) what you've tried
@Growler 非常感谢您的提示。我已经添加了小提琴，我还安装了 firefox firebug，我正在尝试解决这个问题。谢谢

标签： javascript html google-chrome firefox

【解决方案1】：

您的问题与您的脚本无关（您可以将其完全删除，但问题仍然存在）而与您的 HTML 无关。

usemap 属性必须有一个前导 #。根据W3C spec on <map>：

usemap 属性（如果指定）必须是对map 元素的有效哈希名称引用。

hash-name reference 是

一个由“#”（U+0023）字符组成的字符串，后跟一个与元素名称属性值完全匹配的字符串

您的 usemap 值没有前导 #，Chrome 接受（超出规范要求）而 Firefox 不接受。将前导 # 添加到您的 usemap 属性可以修复您的代码。

【讨论】：