1

我从来没有见过这样愚蠢的事情，或者可能是凌晨 2 点 30 分，我产生了幻觉。我在标题中创建了简单的锚链接，我完全无法点击它们。它们只是纯文本，完全不可点击。

如果您能给我一个提示，我将不胜感激我在什么/哪里不遵守 HTML/CSS 守护程序。

HTML

<header>
    <div class="confine">

        <div class="complete-head-content">

              <div class="left-width-less logo-width">
                  <img src="./imgs/twit-logo.png" />
              </div>

              <div class="right-width-less">
                  <div class="top-header-content">

                         <h1 class="pres-title">Defining Twisted Strategy</h1>
                  </div>

                  <div class="lower-header-content">

                        <div id="navcontainer">
                          <ul>
                            <li><a href="http://www.google.com">Meet the Hobos</a></li>
                            <li><a href="#">Why me?</a></li>
                            <li><a href="#">Our Work in Oblivion</a></li>
                            <li><a href="#">Our Perspective</a></li>
                            <li><a href="#">Our Approach</a></li>
                          </ul>
                        </div>

                  </div>
              </div>

              <div class="c"> </div>
        </div>

    </div>

  </header>

  <div id="contend"> 
  ... ... ...

CSS

a {
  color: #EA2E49;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #EA2E49;
  cursor: pointer;
}

header {
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
}

.complete-head-content {
  width: 100%;
  background-color: #a0c654;
  height: 130px;
}

.left-width-less {
  float: left;
  background-color: #fff;
  width: 15%;
  text-align: center;
  height: 130px;
    vertical-align: middle;
}

.left-width-less img {

  width : 76px; 
  height: 100px;
  margin-top: 10px;
}

.right-width-less {
    float: right;
    width: 85%;
}

.top-header-content {
  width: 100%;
  height: 70px;
  background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}

.lower-header-content {
  width: 100%;
  height: 70px;
}

.logo {
  cursor: pointer;
}

/* Navigation */

#navcontainer {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 19px;
}
#navcontainer ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
  text-decoration: none;
  padding: .2em 1.7em;
  color: #fff;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

编辑

感谢 Nikhil，它有一个 Z-index:1，当它被移除时修复了这个错误。

谢谢。

4

2 回答 2

1

除非你遗漏了什么。无论有没有 CSS，它都对我有用。在 IE 8 中测试

顺便说一句，您是如何包含 CSS 的？

于 2013-09-18T06:42:00.260 回答
0

<div id="contend">标签旁边的右侧有一个z-index:1. 这使得<header>标签中的每个链接都不可点击。

解决方案是删除 z-index 属性。

希望它可以帮助某人。

于 2013-09-18T19:17:01.677 回答