爲什麼錨只在Firefox的地圖座標上工作？

Question

我有這個代碼爲我製作的地圖。但由於某些原因，<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

我剛剛完成去檢查的，即，FF和鉻最後一個版本發生什麼。

我找到的解決方案是：

$(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>