IE中奇怪的z索引或链接问题

问题描述：

我正在为我的学校编程一个网站，并且我想让背景中的字符具有悬停效果。当您将鼠标悬停在大多数浏览器中的这些字符上时，会弹出一个窗口，显示他们是谁。这适用于Internet Explorer以外的所有浏览器。在IE中，链接的一小部分是可点击的，但其余部分不是。我不确定这是否与z-index类似，因为它具有很高的z-索引。IE中奇怪的z索引或链接问题

这里是CSS：

* 
{ 
margin:0px; 
padding:0px; 
} 

#grass 
{ 
left: 0px; 
background-repeat: repeat; 
background-image: url(http://thestopitcampaign.com/images/grass.jpg); 
bottom:0px; 
margin:0px; 
position:fixed; 
padding:0px; 
font-size:15px; 
height: 200px; 
width: 100%; 
z-index:-6; 
} 

#env 
{ 
z-index: -5; 
position:fixed; 
height:500px; 
bottom:0px; 
width:100%; 
left:0px; 
} 

.envimg 
{ 
bottom:0px; 
position:fixed; 
float:left; 
display:block; 
margin-left:auto; 
margin-right:auto; 
} 

#people 
{ 
padding: 0px; 
bottom: 0px; 
position: fixed; 
width: 900px; 
right: 50%; 
left: 50%; 
margin-right: -450px; 
margin-left: -450px; 
z-index:-4; 
} 

#school 
{ 
width: 500px; 
right: 50%; 
left: 50%; 
margin-right: -250px; 
margin-left: -250px; 
margin-bottom: 0px; 
z-index:-5; 
} 

body, html 
{ 
font-family: "PT Sans", sans-serif; 
overflow-x:hidden; 
overflow-y:auto; 
-ms-overflow-x:hidden; 
-ms-overflow-y:auto; 
height:100%; 
width:100%; 
z-index:-7; 
} 

#wrapper 
{ 
z-index: 1000; 
position: relative; 
height:100%; 
padding-left:10px; 
padding-right:10px; 
overflow-x:hidden; 
overflow-y:auto; 
-ms-overflow-x:hidden; 
-ms-overflow-y:auto; 
} 

.cloud 
{ 
bottom: 0px; 
left: -600px; 
position:fixed; 
z-index:-6; 
} 

#cloudpic 
{ 
height:200px; 
} 

#sunmoon 
{ 
position:fixed; 
top:100px; 
right:200px; 
z-index:-7; 
height:300px; 
} 

#sunmoonimg 
{ 
height:300px; 
} 

#content 
{ 
top: 40px; 
border-color: black; 
border-style: solid; 
border-width: 2px; 
background-color: #e6e6e6; 
max-width: 1000px; 
margin-right: auto; 
margin-left: auto; 
display: block; 
position: relative; 
z-index: 1; 
padding:30px; 
-moz-border-radius: 15px; 
border-radius: 15px; 
} 

h1 
{ 
font-family: "Mate SC", sans-serif; 
font-weight:normal; 
font-size:7em; 
margin:10px; 
} 

#main 
{ 
text-align: center; 
height:100%; 
display:inline; 
} 

#logo 
{ 
display: inline; 
width: 100px; 
} 

@<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 

@.nav ul 
{ 
display: inline; 
list-style-type:none; 
margin-top:10px; 
position:relative; 
} 

.nav li 
{ 
display: inline; 
margin:10px; 
} 

.nav a 
{ 
display: inline; 
text-decoration:none; 
color:black; 
} 

.nav a:hover 
{ 

    color: #ff451b; 

} 

#logodiv 
{ 
top:10px; 
width: 600px; 
margin-right: auto; 
margin-left: auto; 
display: block; 
position: relative; 
z-index: 4; 
text-align:center; 
} 

.nodec 
{ 
text-decoration:none; 
color:black; 
} 

img 
{ 
display:inline; 
} 

#navbar 
{ 
margin-right: auto; 
margin-left: auto; 
position: relative; 
top: 0px; 
display: block; 
z-index: 4; 
text-align:center; 
font-size:30px; 
font-family:"Oswald","American Typewriter","serif"; 
} 

#header 
{ 
margin-bottom: 10px; 
font-size: 10px; 
} 

#logocorner 
{ 
position:absolute; 
bottom:10px; 
left:10px; 
z-index:-3; 
} 

#logopic 
{ 
width:100px; 
} 

.nav a:active 
{ 
    color: #c45c00; 
} 

#™ 
{ 
position:absolute; 
top:0px; 
} 

#body 
{ 
background-color: #7ebcff; 
} 

.name 
{ 
font-weight:bold; 
} 

#name 
{ 
border:1px solid black; 
outline:none; 
width:200px; 
} 

#message 
{ 
height:50px; 
width:200px; 
resize:both; 
border:1px solid black; 
outline:none; 
} 

.name 
{ 
text-align:left; 
width:120px; 
} 

.post 
{ 
text-align:left; 
} 

table.bulletin 
{ 
position:relative; 
display:block; 
margin-left:auto; 
margin-right:auto; 
max-width:500px; 
} 

.post 
{ 
display:block; 
margin:5px; 
} 

td 
{ 
padding:5px; 
} 

#post 
{ 
width:200px; 
position:relative; 
margin-left:auto; 
margin-right:auto; 
display:block; 
text-align:center; 
margin-top:20px; 
} 

#submit 
{ 
display:block; 
position:relative; 
width:202px; 
text-align:center; 
} 

#showbulletin 
{ 
cursor:pointer; 
cursor:hand; 
} 

#showbulletin:hover 
{ 
color: #ff451b; 
} 

#query 
{ 
width:100px; 
border:1px solid black; 
outline:none; 
} 

#newmotd 
{ 
width:100px; 
border:1px solid black; 
outline:none; 
} 

#motd 
{ 
text-align:center; 
margin-bottom: 20px; 
font-size:15px; 
font-style: italic; 
} 

#signup 
{ 
    padding: 10px; 
    background-color: #f98f0c; 
    right:20px; 
    top: 20px; 
    display: block; 
    position: absolute; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    z-index: 5; 
} 

input.signup 
{ 
    width:200px; 
} 

input.signupsubmit 
{ 
    width:200px; 
} 

#txtDefaultHtmlArea 
{ 
background-color: white; 
height:300px; 
width: 100%; 
resize:both; 
} 

#signup:active 
{ 
    background-color: #ff6914; 
} 

iframe 
{ 
    background-color: white; 
} 

#suspensionlink 
{ 
    left: 20px; 
    padding: 10px; 
    background-color: #f9de43; 
    top: 20px; 
    display: block; 
    position: absolute; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    z-index: 5; 
} 

#suspensionlink:active 
{ 
    background-color: #ffc500; 
} 

.suspform 
{ 
    text-align: center; 
    display: block; 
} 

textarea.suspform 
{ 
    padding: 2px; 
    text-align: left; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
    position: relative; 
    height: 100px; 
    width: 300px; 
} 

span.suspform 
{ 
    margin-bottom: 5px; 
    margin-top: 15px; 
    font-weight: bold; 
} 

form.suspform 
{ 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
    position: relative; 
} 

#submitref 
{ 
    margin-top: 10px; 
} 

input.suspform 
{ 
    padding: 2px; 
    width: 150px; 
    text-align: left; 
    margin-right: auto; 
    margin-left: auto; 
    display: block; 
    position: relative; 
} 

.cover 
{ 
    display: block; 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    width: 400px; 
    border-color: black; 
    border-width: 1px; 
    border-style: solid; 
} 

area 
{ 
border: 1px dashed black; 
}

下面是锚标记

#container_people 
{ 
z-index: 500; 
padding: 0px; 
bottom: 0px; 
position: fixed; 
height: 284px; 
width: 1390px; 
right: 50%; 
left: 50%; 
margin-right: -688.5px; 
margin-left: -688.5px; 
} 

#popup 
{ 
    text-align: center; 
    padding: 5px; 
    background-color: #e6e6e6; 
    left:0px; 
    bottom: 10px; 
    display: block; 
    position: absolute; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    z-index: 5; 
    display:block; 
    width:170px; 
} 

a 
{ 
outline:none; 
}

这里有锚标签

.hoverover 
{ 
    z-index: 5; 
}

，这里的DIV是用于在HTML页码：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="stylesheet" type="text/css" href="http://www.thestopitcampaign.com/stylesheet.css?1330921248" /> 
     <script type="text/javascript" src="http://thestopitcampaign.com/javascript/jquery.js?1330921248"></script> 
     <script type="text/javascript" src="http://thestopitcampaign.com/javascript/curvycorners.js?1330921248"></script> 
     <link href='http://fonts.googleapis.com/css?family=PT+Sans|Mate+SC|Righteous|Oswald' rel='stylesheet' type='text/css'> 
     <meta name="description" content="STOP IT! ANTI-BULLYING CAMPAIGN." /> 
      <meta name="keywords" content="STOP, IT, stop, it, bullying, campaign, school, kids, adults" />  <title> 
     The Stop It Campaign!  </title> 
    </head> 
    <body id="body"> 
     <div id="wrapper">

START

佐伊：良好证人，270）;”的onmouseout = “popuphide（）;”> 卢卡：受害者”，450）;”鲍尔斯太太：老师'，810）;“m：：”“”，））））012 012 012 012 012 012 012 012 012“”“”“”“”“”“”“”的onmouseout = “popuphide（）;”> 最大：欺负”，1005）;”的onmouseout = “popuphide（）;”>

END

  <img class="envimg" id="school" src="http://thestopitcampaign.com/images/school.png" alt="school" /> 



     </div> 
     <div id="sunmoon"> 
      <img id="sunmoonimg" src="http://thestopitcampaign.com/images/sun.png" alt="sun" /> 
     </div> 
     <div id="grass"></div> 
     <div class="cloud" id="cloud1"><img src="http://thestopitcampaign.com/images/cloud.png" alt="cloud" id="cloudpic" /></div> 
       <div id="logodiv"> 
      <a href="http://thestopitcampaign.com/index.php" title="home" class="nodec"><h1>STOP IT!</h1></a> 
     </div> 
     <div id="motd"> 
      <p>"STAND UP, SPEAK UP, INFORM and DOCUMENT "</p> 
     </div> 
     <div id="navbar"> 
      <ul class="nav"> 
      <li class="nav"><a href="http://thestopitcampaign.com/about" class="nav">About</a></li> 
      <li class="nav"><a href="http://thestopitcampaign.com/parents" class="nav">Parents</a></li> 
      <li class="nav"><a href="http://thestopitcampaign.com/educators" class="nav">Educators</a></li> 
      <li class="nav"><a href="http://thestopitcampaign.com/bulletin" class="nav">Bulletin</a></li> 
      </ul> 
     </div> 
     <a href="http://thestopitcampaign.com/signup" class="nodec" title="Join S.T.O.P. I.T."><div id="signup" style="text-align:center;"> 
     Join the campaign!<br/>6 members! 
     </div></a> 
     <a href="http://thestopitcampaign.com/reflection" class="nodec"><div id="suspensionlink">Suspension Reflections</div></a> 
     <div id="logocorner"><img src="http://thestopitcampaign.com/images/logo.png" id="logopic" alt="logo" title="The StopIt Campaign" /><span id="™">&trade;</span></div> 

<script type="text/javascript" src="http://www.thestopitcampaign.com/javascript/environment.js?1330921248"></script> 
    </div> 
    </body> 
</html>

谢谢你对我的帮助，因为我花了很长时间试图弄清楚这一点，我相信大家都同意，IE是非常令人沮丧的Web开发人员

点击此处阅读站点：http://thestopitcampaign.com

请不要发布您的所有代码，请提供[简化测试用例]（http://css-tricks.com/reduced-test-cases/）。最好在[dabblet]（http://dabblet.com/）或[Jsfiddle]（http://jsfiddle.net/）上。 – bookcasey 2012-03-05 04:25:08

由于书架提到，说这里是我的网站请修复它不是很有帮助。你能否至少将我们指向控制标签和它的CSS的html？ – mrtsherman 2012-03-05 04:29:04

很少有问题：1.哪个版本的IE（有很大的差别），2.你是否在每个浏览器的同一台计算机上测试（我看到很多定位，所以显示器的大小可以改变）3.我去了在Chrome浏览器中，我的电脑风扇立即启动，因此如果网站内存密集，可能还有其他更紧迫的问题。哦，和PS：漂亮的网站。 – Anthony 2012-03-05 04:29:23

答

我不确定哪个IE给你适合 - 但我已经遇到奇怪的悬停状态问题，绝对定位链接之前在至少IE7。

即使您给它显示：block，“可点击”或“可滚动”区域仅限于链接中的文本，但不限于填充或其他任意尺寸。由于您在这些链接中没有任何文字，是的，您将被限制在一个非常小的区域。

我的工作是给链接一个背景图像 - 甚至一个实际上并不存在的图像。

所以，在IE-只有样式表，你可以试试：

#container_people a { 
    background: url(trasparent.gif); 
}

我发现，图像文件（transparent.gif）并不实际存在。 IE只需要就认为它存在。黑客，是的，但它的作品。

这已经为我清除了一些链接问题。

谢谢soooo多！经过大量研究，这是什么工作！ – 2012-03-06 01:54:15

答

可能是一个具有跨浏览器功能的JavaScript框架，例如jquery（一般）或jquery tools（特殊覆盖...工具提示）值得一看。

悬停功能有点在jQuery中，我只是使用HTML事件。 – 2012-03-05 05:16:39

IE中奇怪的z索引或链接问题

相关推荐