我有IE 8和IE 7 z-index
,position
和其他问题。我在http://jsfiddle.net/KeEPF/处就这些问题做了一个例子。如果您通过Chrome,Mozilla或其他浏览器查看,您会发现大图片上方有链接(链接#imagemap2
)。
在IE8和IE7上,此图像始终位于顶部,您无法单击链接。
如何解决此问题?
以下是代码:
<div id="splashbar">
<div id="left_content_text">
<img src="#" alt="facebook" />
<h2> <a href="" style="color:#fff; text-decoration:none;">test</a></h2>
Lorem ipsum dolor sit amet, con tetur adipiscing elit. Etiam tincidu molestie justo, vitae dignissim me scelerisque vel. Proin vitae nibh arcu vulpu tate vehicula.<br/>
</div>
<div id="splashimages">
<a href="#full_header_link" class="full_header_link">
<img width="738" height="191" src="tet" class="attachment-post-thumbnail wp-post-image" alt="header_forside" title="header_forside" /> </a>
<a href="#imagemap1" style="width:100px;height:100px;left:0px; top:10px" class="imagemap_header_link"> </a>
<a href="#imagemap2" style="width:100px;height:100px;right:0px; top:10px" class="imagemap_header_link"></a>
</div>
<div class="clear">
</div>
</div>
#splashbar {
position: relative;
zoom: 1;
z-index: 2;
}
#splashimages {
position: relative;
top: 0;
right: 0;
z-index: 2;
zoom: 1;
}
#splashimages img {
z-index: -5;
position: absolute;
right: 0;
top: 0;
visibility: visible;
display: block;
height: 173px;
zoom: 1;
}
#splashimages .imagemap_header_link {
position: absolute;
display: block;
z-index: 990;
visibility: visible;
zoom: 1;
}
答案 0 :(得分:6)
它可以用一点作弊来修复..
IE不喜欢你的2“imagemap”链接没有背景的事实,虽然我认为你希望它们透明,因为这是地图的想法
这对我有用:
#splashimages .imagemap_header_link {
position: absolute;
width: 100px;
height: 100px;
top: 10px;
background: #dad; /* any color */
filter:alpha(opacity=0); /* make it transparent in IE again */
opacity: 0; /* make it transparent for good browsers */
}
补充说:对于记录,工作示例已删除所有不必要的额外属性,无需在任何div上设置zoom: 1;
,绝对定位的已经具有“hasLayout”