[英]CSS to display unordered list horizontally in IE 6 and 7
I've created a template for WebSVN ( see it in action here ) and have worked hard to make it use web standards and validate. 我已经为WebSVN创建了一个模板( 请参见此处 ),并努力使它使用Web标准并进行验证。 It looks great in most browsers, but as I feared, IE 6 and IE 7 can't quite hack it.
在大多数浏览器中看起来不错,但正如我担心的那样,IE 6和IE 7不能完全破解它。 In my case, the problem is that they refuse to render the unordered list for my navigation horizontally — they both display each
<li>
on a separate line and overflow the allotted vertical space. 就我而言,问题是他们拒绝水平呈现我的导航的无序列表-他们都在单独的行上显示每个
<li>
并溢出分配的垂直空间。 (IE 8 behaves correctly, and looks very close to Firefox and Safari, which was a pleasant surprise.) (IE 8的行为正确,并且看起来非常接近Firefox和Safari,这是令人惊喜的。)
I haven't been able to find a suitable solution on Google or SO. 我无法在Google或SO上找到合适的解决方案。 I would prefer a CSS fix, rather than JavaScript or something similar, although that's not entirely off the table.
我更喜欢CSS修复,而不是JavaScript或类似的修复方法,尽管那还不完全可行。 (Also, I don't care about the PNG transparency issue in IE 6 — it doesn't hurt readability at all, and IE 7 and 8 both handle it perfectly.)
(此外,我也不关心IE 6中的PNG透明性问题-它根本不会损害可读性,而IE 7和8都可以很好地处理它。)
Edit: Here are relevant snippets of HTML and CSS: 编辑:这是HTML和CSS的相关片段:
<ul id="links">
<li class="diff"><a href="comp.php?repname=BYU+CocoaHeads&compare[]=%2F@552&compare[]=%2F@553">Compare with Previous</a></li>
<li class="rev"><a href="revision.php?repname=BYU+CocoaHeads&">Changes</a></li>
<li class="log"><a href="log.php?repname=BYU+CocoaHeads&path=%2F&&isdir=1">View Log</a></li>
<li class="download"><a href="dl.php?repname=BYU+CocoaHeads&path=%2F&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&path=%2F&isdir=1">RSS feed</a></li>
</ul>
#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;
}
Edit: Now that I've found a solution, the linked page won't (shouldn't?) misbehave any more in this situation, but will continue to be publicly available. 编辑:现在,我已经找到了解决方案,在这种情况下,链接页面不会(应该吗?)表现不佳,但仍将继续公开提供。
It turns out that IE 6 and 7 don't implement inline-block
as expected. 事实证明,IE 6和7没有实现预期的
inline-block
。 Looks like I found a good solution, though... Using the following CSS works for those browsers, and preserves the correct formatting in newer browsers: 看起来我找到了一个很好的解决方案……使用以下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;
}
I despise IE hacks.... I'm strongly considering including Pushup in my template. 我鄙视IE hacks。...我强烈考虑在模板中包含Pushup 。
It works fine for me in IE8 with compatability mode. 在具有兼容模式的IE8中,它对我来说很好用。
The only potential problem I can see is you don't specify margins on the list items. 我看到的唯一潜在问题是您没有在列表项上指定边距。 Try setting
margin:0
and see if that helps. 尝试设置
margin:0
,看看是否有帮助。
向li元素分配float:left
应该起作用,IIRC。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.