CSS 在 IE 6 和 7 中水平显示无序列表

Question

我为WebSVN (see it in action here) 创建了一个模板，并努力使其使用网络标准并进行验证。它在大多数浏览器中看起来很棒，但正如我担心的那样，IE 6 和 IE 7 无法破解它。在我的情况下，问题是他们拒绝为我的导航水平呈现无序列表——它们都在单独的行上显示每个<li>，并溢出分配的垂直空间。 （IE 8 运行正常，看起来非常接近 Firefox 和 Safari，这是一个惊喜。）

我无法在 Google 或 SO 上找到合适的解决方案。我更喜欢 CSS 修复，而不是 JavaScript 或类似的东西，尽管这并不是完全不可能的。 （另外，我不关心 IE 6 中的 PNG 透明度问题——它根本不会影响可读性，IE 7 和 8 都可以完美地处理它。）

---

编辑：以下是HTML和CSS的相关sn-ps：

HTML

<ul id="links">
  <li class="diff"><a href="comp.php?repname=BYU+CocoaHeads&amp;compare[]=%2F@552&amp;compare[]=%2F@553">Compare with Previous</a></li>
  <li class="rev"><a href="revision.php?repname=BYU+CocoaHeads&amp;">Changes</a></li>
  <li class="log"><a href="log.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;&amp;isdir=1">View Log</a></li>
  <li class="download"><a href="dl.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1" rel="nofollow">Download</a></li>
  <li class="svn"><a href="http://dysart.cs.byu.edu/chsvn/">SVN</a></li>
  <li class="rss"><a href="rss.php?repname=BYU+CocoaHeads&amp;path=%2F&amp;isdir=1">RSS feed</a></li>
</ul>

CSS

#links {
    padding: 0;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 4px;
    white-space: nowrap;
}

---

编辑：现在我已经找到了解决方案，链接页面在这种情况下不会（不应该？）行为不端，但会继续公开。 p>

Answer 1

事实证明，IE 6 和 7 没有按预期实现 inline-block。不过，看起来我找到了一个很好的解决方案......使用以下 CSS 适用于这些浏览器，并在较新的浏览器中保留正确的格式：

#links {
    padding: 0 0 4px;
    margin: 0;
    text-align: center;
    background: url(images/bg-gray-light.png) repeat-x 0 top;
    border-bottom: solid 1px #a1a5a9;
}

#links li {
    font-size: 110%;
    display: inline-block;
    padding: 5px 5px 0;
    white-space: nowrap;
}

* html #links li {
    display: inline;
}

我鄙视 IE hack……我强烈考虑在我的模板中包含 Pushup。

Answer 2

在兼容模式的 IE8 中它对我来说很好。

我能看到的唯一潜在问题是您没有在列表项上指定边距。尝试设置margin:0 看看是否有帮助。

Answer 3

将float:left 分配给 li 元素应该可以工作，IIRC。