小div定位在大div中,大div固定宽度,当浏览器高度不同时,比例会变化,里面定位的小div位置会偏,该怎么办?

<body>
    <div id=wrap>
        <div class="map">
             <div class=A1><a href="#">1<span class=C1>return of</span></a></div>
             <div class=A2><a href="#">2<span class=C2>the king</span></a></div>
        </div>
    </div>
</body>

/*wrap是底层.map是背景图,A1,A2是定位在map里面的小div*/

$(window).load(function() {
    $('#wrap').height($(window).height());
    $('#wrap').width($(window).width());
    $('.map').height($(window).height());
    $('.map').width($(window).width());
});

/*通过js获取当前页面高度和宽度,让图片充满浏览器.*/

*
{
    margin: 0;
    padding: 0;
}
#wrap
{
    margin: 0 auto;
}
.map
{
    position: relative;
    float: left;
    background: url(../images/ROTK.jpg) no-repeat;
    -webkit-background-size: 100% 100%;
            background-size: 100% 100%;
}
a{
    position: absolute;
    width: 20px;
    height: 20px;
    border: 3px solid #fff;
    -webkit-border-radius: 23px;
       -moz-border-radius: 23px;
            border-radius: 23px;
    background-color: #ff8000;
}
.A1 a:link
{
    margin: 16.6% 0 0 4.78%;
}
.A2 a:link
{
    margin: 5.7% 0 0 20.2%;
}
.A3 a:link
{
    margin: 12.2% 0 0 17.8%;
}

但是发现当浏览器地址栏下面有书签栏之类的东西会把背景map的图片高度压缩,导致内部定位的div A1,A2等相对于图片向下偏移

请观察下图"love""左边字上面的圆点位置,没有书签时在字的上方,出现书签时位置偏下盖住了字