我正在构建的网站有问题。 我有一个菜单，其中包含 2 个链接(称为“默认”和“测试”)到列表项中，但在 Firefox 中我无法单击它们。 在 IE 中它们有效:我认为是页面上元素的 z-index 问题，但我无法解决它。
<!DOCTYPE html>
<html>
<head>
<style>
.sezup li.current{
color:#067d2c;
position:relative;
z-index:20;
}
.sezup a, a:hover{
color:#067d2c;
position:relative;
z-index:20;
}
.header{
position:relative;
top:0px;
}
.sezup {
margin: 0 auto;
padding: 0 0 0 75px;
width:800px;
position:relative;
z-index:20;
}
#lineaup {
background: url("../Images/sfondobarraup.png") repeat scroll 0 0 transparent;
height: 16px;
margin: 55px 0 0;
position: relative;
z-index: 0;
top: -25px;
left: 0px;
}
#lineaup li {
bottom: 6px;
float: left;
margin: 0 10px;
padding: 2px 15px;
position: relative;
}
.loghi {
margin: 0 auto;
padding: 20px 0 0;
position: relative;
top: -45px;
width: 1000px;
height: 97px;
border:1px black solid;
}
#logo {
position: relative;
top: -20px;
float:left;
}
#calciatore {
position: relative;
float:right;
top:-50px;
}
#erba {
background: url("../Images/erba.png") repeat scroll 0 0 transparent;
height: 65px;
position: relative;
top: -110px;
z-index: 0;
border:1px black solid;
}
</style>
</head>
<body>
<div class="header">
<div id="lineaup">
<div class="sezup">
<ul>
<li class="current"><a href="Default.aspx" id="hrefHome">Default</a></li>
<li><a href="test.aspx?id=1" id="hrefProfile">Test</a></li>
</ul>
</div>
</div>
<div class="loghi">
<img src="" title="logo" id="logo" /><img src="" title="logo" id="calciatore" />
</div>
<div id="erba">
</div>
</div>
</body>
</html>
最佳答案
因为the stacking context ，一旦在父元素上设置了 z-index，就无法通过在子元素上设置更高的 z-index 来“突破”它。
通常，删除所有多余的 z-index 值并只在需要的地方添加它们会容易得多。
关于html - href 链接不可点击，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12919720/