Chrome 中的图片映射:事件未触发！在IE7中工作正常

我有一个图像，上面有一组映射到它的区域。单击每个区域时，将调用一个函数来执行某些操作。这整个磨难在IE7中效果很好！这一次，是Chrome让我感到不安。Chrome 不会在这些区域触发任何事件，我无法查明问题所在。以下是相关代码：

<div id="containerRemote">
<img src="resources/buttons/RC64_small.png" width="170" height="590"
alt="" usemap="#remotemap" />
<map id="remotemap" name="remotemap">
    <area shape="circle" coords="37,47.5,12" alt="TV Input" />
    <area shape="circle" id="format" coords="37,78.5,12.5" alt="Format" />
    <area shape="circle" coords="85.5,60.5,13" alt="Power" />
    <area shape="circle" id="poweron" coords="140.5,50.5,12.5" alt="DTV Power On" />
    <area shape="circle" id="poweroff" coords="140.5,79.5,12" alt="DTV Power Off" />
    <area shape="circle" id="play" coords="87.5,134,17" alt="Play" />
    <area shape="circle" id="stop" coords="87.5,95.5,13" alt="Stop" />
    <area shape="circle" id="rewind" coords="43,134,14" alt="Rewind" />
    <area shape="circle" id="fastforward" coords="133.5,134,14" alt="Fast Forward" />
    <area shape="circle" id="pause" coords="61.5,164.5,13" alt="Pause" />
    <area shape="circle" id="record" coords="116,162.5,13" alt="Record" />
    <area shape="circle" id="replay" coords="61.5,101.5,13" alt="Replay" />
    <area shape="circle" id="advance" coords="116,105,13" alt="Advance" />
    <area shape="circle" id="guide" coords="40.5,205.5,15" alt="Guide" />
    <area shape="circle" id="active" coords="68.5,187.5,17" alt="Active" />
    <area shape="circle" id="list" coords="106.5,187.5,14" alt="List" />
    <area shape="circle" id="exit" coords="133.5,209,15" alt="Exit" />
    <area shape="circle" id="select" coords="89,243.5,18" alt="Select" />
    <area shape="circle" id="up" coords="89,209,12.5" alt="Up" />
    <area shape="circle" id="up2" coords="73.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="up3" coords="104.5,211.5,12.5" alt="Up" />
    <area shape="circle" id="down" coords="89,279,12.5" alt="Down" />
    <area shape="circle" id="down2" coords="73.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="down3" coords="104.5,271.5,12.5" alt="Down" />
    <area shape="circle" id="left" coords="53.5,243.5,12.5" alt="Left" />
    <area shape="circle" id="left2" coords="56,224.5,12.5" alt="Left" />
    <area shape="circle" id="left3" coords="53.5,257,12.5" alt="Left" />
    <area shape="circle" id="right" coords="122.5,243.5,12.5" alt="Right" />
    <area shape="circle" id="right2" coords="121,224.5,12.5" alt="Right" />
    <area shape="circle" id="right3" coords="119.5,257,12.5" alt="Right" />
    <area shape="circle" id="back" coords="40.5,288,15" alt="Back" />
    <area shape="circle" id="menu" coords="86.5,305,17" alt="Menu" />
    <area shape="circle" id="info" coords="133.5,290,15" alt="Info" />
    <area shape="circle" id="red" coords="45,320,12" alt="Red" />
    <area shape="circle" id="green" coords="70.5,334.5,12" alt="Green" />
    <area shape="circle" id="yellow" coords="100,334.5,12" alt="Yellow" />
    <area shape="circle" id="blue" coords="125,320,12" alt="Blue" />
    <area shape="circle" coords="47,356,15" alt="Volume Plus" />
    <area shape="circle" coords="51,399.5,14" alt="Volume Minus" />
    <area shape="circle" coords="49,428.5,12" alt="Mute" />
    <area shape="circle" id="channelup" coords="130.5, 356.5,15" alt="Channel Plus" />
    <area shape="circle" id="channeldown" coords="127.5,399,14" alt="Channel Minus" />
    <area shape="circle" id="previous" coords="126.5,428.5,12" alt="Previous Channel" />
    <area shape="circle" id="one" coords="49,456.5,12" alt="One" />
    <area shape="circle" id="two" coords="87.5,456.5,12" alt="Two" />
    <area shape="circle" id="three" coords="125,456.5,12" alt="Three" />
    <area shape="circle" id="four" coords="49,486.5,12" alt="Four" />
    <area shape="circle" id="five" coords="87.5,486.5,12" alt="Five" />
    <area shape="circle" id="six" coords="125,486.5,12" alt="Six" />
    <area shape="circle" id="seven" coords="49,513.5,12" alt="Seven" />
    <area shape="circle" id="eight" coords="87.5,513.5,12" alt="Eight" />
    <area shape="circle" id="nine" coords="125,513.5,12" alt="Nine" />
    <area shape="circle" id="dash" coords="49,539.5,12" alt="Dash" />
    <area shape="circle" id="zero" coords="87.5,539.5,12" alt="Zero" />
    <area shape="circle" id="enter" coords="125,539.5,12" alt="Enter" />
</map>
</div>

我不喜欢用这个庞大的地图区域列表来骚扰你，但地图中可能存在我遗漏的一些错误。下面是将函数调用绑定到这些区域上的 onclick 事件的 JS。下面是我添加的一段 JQuery 代码，它为每个区域映射分配了一个 href 属性。

    $("#remotemap area").click(function() {
    if($(this).attr("id") != undefined) {
        logRCCommand($(this).attr("id"));
    }
    return false;
});
    $("#remotemap area").attr("href", "javascript: void(0);");

.CSS：

#containerRemote{
position: absolute; /* this line, when commented, fixes the problem, but ruins layout         */
width: 170px; 
}

有趣的是，在图像的最底部有三个区域可以正常工作，尽管它们的大小不正确。这让我相信我有某种格式错误，而不是语法或逻辑错误。即使如此，我也不知道是什么原因造成的。我在互联网上搜索线索，但无济于事！

谢谢

更新：我认为问题与CSS有关。我注释掉了包含此地图的div 的某行 CSS。瞧！一切正常，但现在整个页面的布局已经下地狱了。我不知道这应该是一个新问题还是只是当前问题的更新。无论如何，我更新了我的代码以包含更多相关行。