Question

出于某种原因，除了IE6之外，该网站在所有浏览器中都能正常显示。在IE6中，顶部导航根本不显示...任何帮助将不胜感激：

我已将代码放在下面（我必须取出图片网址发布）：

<div id="nav">
  <ul>
    <li class="floatLeft" id="contact">Contact</li>
    <li id="about">About</li>
    <li id="resume">Resume</li>
    <li class="floatLeft" id="work">Work</li>
  </ul>
</div>

我正在使用带有以下定义的链接css表：

#nav {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  height: 50px;
  width: 214px;
  position: absolute;
  text-decoration: none;
  list-style-type: none;
  left: 780px;
  right: auto;
  margin: 0px;
  padding: 0px;
  top: 52px;
  z-index: 800;
  zoom: 1;
}

#nav ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  display: block;
}

#nav ul li {
  float: left;
  overflow: hidden;
  text-decoration: none;
  padding: 0px;
  text-indent: -9000px;
  margin-top: 0px;
  margin-right: 10px;
  margin-bottom: 0px;
  margin-left: 0px;
}

#nav ul a {
  display: block;
}

#nav #contact a {
  background-position: left top;
  width: 43px;
  background-repeat: no-repeat;
  background-image: url();
  height: 50px;
  text-decoration: none;
}

#nav #about a {
  width: 44px;
  background-image: url();
  background-repeat: no-repeat;
  height: 50px;
  background-position: left top;
  text-decoration: none;
}

#nav #resume a {
  background-repeat: no-repeat;
  height: 50px;
  width: 43px;
  text-decoration: none;
  background-image: url();
}

#nav #work a {
  background-repeat: no-repeat;
  width: 44px;
  background-image: url();
  height: 50px;
  background-position: left top;
  text-decoration: none;
}

Answer 1

由于text-indent: -9000px;中有#nav ul li，因此无法在其他浏览器中显示。这推翻了整个事物。

其他：

width: 214px;中#nav真的有必要吗？它推下#work LI。

Answer 2

您的HTML中是否有完整的有效doctype？有时，IE进入怪癖模式并且没有一个奇怪的事情......只是一个想法。

Answer 3

问题可能是浮动＆lt; li＆gt;元素以及它们如何与包含的＆lt; ul＆gt;进行交互。我可能会尝试给出＆lt; ul＆gt;定义的高度或者可能是溢出：auto。

#Nav不在IE6中显示

3 个答案: