Question

我注意到Firefox中的一个奇怪行为。

我有一个绝对和居中的横幅，所以我使用了一些css技巧来做到这一点：

#banner { 
  position: absolute; 
  top: 85px; 
  z-index: 1; 
  width: 1280px; 
  left: 50%; 
  margin-left: -640px; 
}

这在我的目标浏览器中运行良好。

为了增加一些复杂性，这个横幅有热点。

所以，我尝试将图像映射附加到图像上。这在IE7 / 8中工作正常。没有运气的Firefox。接下来，我尝试在横幅容器中放置一个锚点，它在视觉上起作用（即我在锚点上放置一个边框以查看它是否正确定位），但它不响应点击事件，即使使用javascript。

这是我尝试过的标记：

<div id="banner">
    <img src="/images/banners/splash.jpg" alt="" width="1280" height="481" usemap="#splashMap" />
    <a href="#" id="banner-anchor1" title="">Some Text</a>    
</div>
    <map name="splashMap" id="splashMap">
        <area shape="rect" coords="174,192,304,464" href="#" alt="" />
        <area shape="rect" coords="277,76,397,169" href="#" alt="" />
        <area shape="rect" coords="306,360,415,470" href="#" alt="" />
        <area shape="rect" coords="662,347,763,479" href="#" alt="" />
    </map>

使用以下css：

#banner a { 
display: block; 
text-indent: -999px; 
position: absolute; 
z-index: 2; 
left: 50%; 
border: 1px solid red; 
}
#banner-anchor1 { 
top: 133px; 
width: 129px; 
height: 289px; 
margin-left: -467px; 
}

锚点和图像映射选项都可以在IE中使用。

谢天谢地，形状是矩形，所以我有一些灵活性，但这是一个奇怪的情况。

有没有办法在Firefox中克服这个问题，或者我可以使用不同的技术来定位绝对定位的元素？

更新

与其他元素存在z-index冲突。身体内容周围有一个div，横幅放在那个div的顶部。即使z-index较低，内容div上的z-index也会导致FF出现问题，因为它们不共享同一个父级。很奇怪IE如何没有这个问题。

Answer 1

我的第一个提示：不要使用图像地图。他们非常不友好，搜索引擎也很难跟踪链接。它被认为是一种被弃用的技术（虽然不是正式的，但我相信）。

无论如何，我不知道它应该是什么样的（锚应该放在哪里？）但是在Chrome中这一切都有效，除了#banner-anchor1上的负边距使它处于一个奇怪的地方。

在Firefox中，如果我删除链接上的边距，它似乎也能正常工作......

示例：http://jsfiddle.net/96etN/1/

Answer 2

尝试确保您在该Anchor元素上使用position：relative？我在视觉词汇表中做了类似的事情，我在图像顶部标记了矩形，以允许用户点击并查看有关文档部分的更多信息，并且它在所有浏览器中都能正常工作。

还有一点需要注意的是，如果你要嵌套多个矩形并希望它们具有相同的偏移量，你需要一个包装器来将相对位置重置为父容器的0,0，例如

<div class="myContainer">
 <div class="myWrapper">
  <a href="#" id="myElement1" class="myTarget" />
 </div>
 <div class="myWrapper">
  <a href="#" id="myElement2" class="myTarget" />
 </div>
 <img src="foo" id="myTitleImage" />
</div>

#myContainer {
 display: block;
 margin-left: auto;
 margin-right: auto;
 width: 80%;
}

.myWrapper { 
 position: absolute;
}

.myTarget {
 position: relative;
 display: block;
}

#myElement1 {
 top: 10px;
 right: 10px;
 width: 50px;
 height: 20px;
}

etc. etc.

图像映射/定位锚定位于定位图像的顶部（Firefox问题）

2 个答案: