javascript - 为什么 anchor 不能仅在 Firefox 中使用 map 坐标？

Question

我有我正在制作的 map 的代码。但出于某种原因 <a>之前<area>仅适用于 Firefox。在 chrome 或 IE 上，你可以将鼠标悬停并看到某些东西是可点击的，但在 firefox 上则不行。有帮助吗？

<p>
    <img alt="California map showing counties" border="0" height="1015" src="http://imjesuschiko.com/doc/map.png" usemap="#ca_map_counties_Map" width="834"> 
    <map id="ca_map_counties_Map" name="ca_map_counties_Map">
        <a href="http://google.com"><area alt="Sacramento" coords="223,369, 227,364, 231,364, 235,367, 259,370, 263,376, 264,393, 264,404, 251,412, 239,412, 225,420, 220,428, 208,432, 214,426, 219,421, 223,416, 222,408, 227,403, 231,380" shape= "poly"></a>
    </map>
</p>

http://liveweave.com/69610i

Answer 1

我刚刚检查完最新版本的 ie、ff 和 chrome 上发生了什么。

我找到的解决方案是:

$(function () {
  $('#ca_map_counties_Map').parent('a:first').on('click', function(e) {
    e.preventDefault();
    window.location.href = $(this).attr('href');
  });
});

area {
  display: inline;
  cursor: pointer;
}
a:-webkit-any-link {
  color: -webkit-link;
  text-decoration: underline;
  cursor: auto;
  z-index: 1000;
}
img {
  border-top-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  height: 1015px;
  width: 834px;
}

<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<p>
  <a href="http://google.com"><map id="ca_map_counties_Map" name="ca_map_counties_Map">
    <area alt="Sacramento" coords="223,369, 227,364, 231,364, 235,367, 259,370, 263,376, 264,393, 264,404, 251,412, 239,412, 225,420, 220,428, 208,432, 214,426, 219,421, 223,416, 222,408, 227,403, 231,380" shape="poly">
    </map></a>
  <img alt="California map showing counties" border="0" height="1015" src="http://imjesuschiko.com/doc/map.png" usemap="#ca_map_counties_Map" width="834">
</p>