Question

这段代码在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小提琴：http://jsfiddle.net/ve9hywdq/1/如果您在Firefox中尝试，则无法点击所需的地图部分，但您可以在Chrome中点击。

Answer 1

您的问题与您的脚本无关（您可以完全删除它并且问题仍然存在）以及与您的HTML有关的一切。

usemap属性必须具有前导#。根据{{3}}：

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

W3C spec on <map>是

一个字符串，由一个“＃”（U + 0023）字符后跟一个字符串，该字符串与一个元素的name属性的值完全匹配

您的usemap值没有Chrome认可的前导#（超出规范要求），而Firefox则没有。在您的#属性中添加前导usemap会修复您的代码。

JS跨浏览器兼容性问题

1 个答案: