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的相关摘要：

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;
}

编辑现在我找到了一个解决方案，链接的网页在这种情况下不会（不应该？）行为不端，但会继续公开发布。

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黑客......我强烈考虑在我的模板中加入Pushup。

Answer 2

在兼容模式的IE8中，它适用于我。

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

Answer 3

为li元素分配float:left应该有效，IIRC。

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

HTML

CSS

3 个答案: