我在这里有一个简单的例子:http://jsfiddle.net/V97TF/1/。基本上我需要绝对定位图像上的链接但由于某种原因z-index在任何IE中都不起作用:(可以请某人帮忙吗?
提前致谢!
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style>
#map {
float:left;
position:relative;
}
#map img {
position:relative;
z-index:9;
}
#map .links {
position:absolute;
width:100%;
height:100%;
z-index:10;
top:0;
left:0;
}
#map .links li {
width:60px;
height:25px;
position:absolute;
}
#map .links a {
display:block;
height:100%;
width:100%;
}
.karlovy-vary { left:41px; top:87px; }
.plzen { left:60px; top:143px; }
.usti-nad-labem { left:110px; top:42px; }
.ceske-budejovice { left:130px; top:226px; }
.liberec { left:193px; top:34px; }
.hradec-kralove { left:243px; top:88px; }
.pardubice { left:244px; top:132px; }
.jihlava { left:241px; top:183px; }
.brno { left:314px; top:210px; }
.olomouc { left:353px; top:156px; }
.zlin { left:397px; top:204px; }
.ostrava { left:400px; top:134px; }
</style>
</head>
<body>
<div id="map">
<img src="http://placekitten.com/501/291">
<ul class="links map1">
<li class="karlovy-vary"><a href="#"></a></li>
<li class="plzen"><a href="#"></a></li>
<li class="usti-nad-labem"><a href="#"></a></li>
<li class="ceske-budejovice"><a href="#"></a></li>
<li class="liberec"><a href="#"></a></li>
<li class="hradec-kralove"><a href="#"></a></li>
<li class="pardubice"><a href="#"></a></li>
<li class="jihlava"><a href="#"></a></li>
<li class="brno"><a href="#"></a></li>
<li class="olomouc"><a href="#"></a></li>
<li class="zlin"><a href="#"></a></li>
<li class="ostrava"><a href="#"></a></li>
</ul>
</div>
</body>
</html>
答案 0 :(得分:0)
我能够使用background-image
hack在Internet Explorer 8中运行它(请参阅this question的答案)。在这种特殊情况下,透明背景图像似乎不起作用。我喜欢mdmullinax's solution:
background-color: #fff;
filter: alpha(opacity=0);
但是如果您需要锚点的内容可见,您可以使用Dio F's solutions之一:
background-image: url("about:blank");
但请注意,如果您使用此解决方案,Dio F表示由于about:blank
文档的MIME类型错误,它会在Chrome中提供MIME类型警告。
我还应该说,在#map .links li
和#map .links a
上设置边框会显示链接与列表项的位置不完全相同,至少在Internet Explorer 8中是这样。这可以是通过将position: absolute;
添加到#map .links a
来修复。