我目前面临的问题是，附加到“主页”和“关于我”选项的链接(请参阅标题)在添加“数据”div 时不可用。但是，下载和联系我的链接仍然可用。此问题发生在 Chrome 和 Firefox 上。它在 IE 上运行良好。
删除“数据”div 后，所有链接都按预期工作。
请帮助我了解哪里出了问题，以及如何改正。
HTML:
<body>
<h1 align="center">Hello</h1>
<div id="main_body">
<div id="leftPanel">
<div id="header">
<ul>
<li><a href="home.html">HOME</a>|</li>
<li><a href="AboutMe.html">ABOUT ME</a>|</li>
<li><a href="Download.html">DOWNLOAD</a>|</li>
<li><a href="ContactMe.html">CONTACT ME</a>
</li>
</ul>
</div>
<div id="data">
<p>hi</p>
</div>
</div>
</div>
</body>
CSS:
body{
padding:0;
margin:0 0 0px 0;
background-color:#000000;
color:white;
}
div, p, ul, li, form, h2, img, textarea, h3, li {
padding:0;
margin:0;
}
ul{
list-style-type:none;
}
#main_body {
width:760px;
margin:20px auto;
font-size:0;
margin-bottom:10px;
}
#leftPanel {
width:760px;
height:677px;
background:url(/img/resume_background.jpg) no-repeat 0 0 #000000;
}
#header {
position:absolute;
width:450px;
margin:40px 0px 0px 315px;
color:#FAF8F2;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:0;
height:35px;
padding:24px 0 0 0;
display:block;
}
#header ul {
margin-top:-20px;
margin-left:20px;
}
#header ul li {
float:left;
display:block;
font:9pt Arial;
color:#F1E9D6;
}
#header ul li a {
font:normal 9pt Arial;
color:#F1E9D6;
padding:0 5px 0 5px;
text-decoration:none;
}
#header ul li a:hover {
color:#2b8cf3;
}
#header p {
text-align:center;
font:normal 9pt Arial;
color:#F1E9D6;
padding:0 5px 0 5px;
text-decoration:none;
}
#header p.text {
width:200px;
display:block;
margin:8px 0 0 110px;
color:#E9DFC6;
background-color:#707070;
font:bold 8pt Arial;
float:left;
padding:0 0 0 12px;
text-align:center;
}
#header p.text a {
text-decoration:none;
color:#FFFFFF;
padding:0 0 0 5px;
}
#header p.text a:hover {
background-color:#403722;
color:#F1E9D6;
}
#data {
position:relative;
width:450px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0;
height:35px;
padding:100px 0 0 0;
display:block;
}
#data p {
text-align:center;
font:bold 12pt Georgia;
color:#F1E9D6;
padding:20px 10px 10px 10px;
text-decoration:none;
}
#data p.text {
width:200px;
display:block;
margin:8px 0 0 110px;
color:#E9DFC6;
background-color:#707070;
font:bold 8pt Arial;
padding:0 0 0 12px;
text-align:center;
}
提前致谢!! :)
最佳答案
那是因为您的数据 div 覆盖了这些链接。除了更改其位置外，您还添加了 CSS 规则 pointer-events: none到数据部分。
#data {
position:relative;
width:450px;
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size:0;
height:35px;
padding:100px 0 0 0;
display:block;
pointer-events:none;
}
关于css - 页面中的某些 HTML 标记不适用于添加 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18133205/