为什么不't锚只适用于Firefox中的地图坐标

Why don't anchors work on map coordinates in Firefox only?

本文关键字：Firefox 地图 坐标 适用于 为什么不      更新时间：2023-09-26

我有这段代码用于我正在制作的地图。但由于某些原因，<a> Before <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

我刚刚完成了对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>

相关文章：