css - IE7 中的流体宽度导航

Question

正在改造客户的网站，他们的其中一项要求是更改导航以适应任何大小的文本。技巧如下:我无法更改 html，只能更改 css 和 javascript。哦，网站上的 jquery 版本是 1.4.4 - 这也不能改变。

我有一个基于 javascript 的解决方案，它适用于所有现代浏览器 - 但我似乎无法让它在 IE7 中运行。该解决方案依赖于所有以其原始宽度呈现的导航元素(即换行而不是调整大小)，以计算必要的宽度变化。在 IE7 中，导航项不清晰 - 最后一个缩小到很小的尺寸以适合第一行，因此 javascript 无法判断是否需要计算调整大小。

javascript 应该可以正常工作，主要问题是我需要知道我的 css 没有做什么来强制最后一个元素换行而不是在 IE7 中调整大小。我已经尝试了 display: inline-block;、white-space: nowrap; 和 float: left; 的大量组合无济于事。

我隔离了有问题的导航并将其放在 fiddle 中 right here .如果有人有任何想法，或者知道我可以实现的更好方法，请告诉我 - 欢迎所有建议!

Answer 1

我这里有两个版本的 jsFiddle 可以比较并验证这是否是您想要的。我稍微清理了您的 CSS，但我做的主要事情是在导航中的 li 上设置了一个 percentage width。你有 6 个元素，所以 100/6 = 16.6666%。我也不应该删除下面 jsFiddles 中的 jQuery。

http://jsfiddle.net/D8etp/1/和 http://jsfiddle.net/D8etp/2/

CSS

body {
    margin: 0;
}
#top-nav{
    padding-top: 30px;
    width: 940px;
}
#nav {
    color: #FFF;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    min-height: 49px;
    background-color: #007369;
    overflow: hidden;
}

#nav > li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 9px 0 0 0;
    width: 16.6666666666%;
}
#nav > li > a {
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding: 7px 12px 17px 12px;
    line-height: 16px;
    margin: 0 4px;
    color: #fff;
    text-decoration: none;
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    overflow: hidden;
}
#nav > li > a:hover {
    background: #b0a893;
}
#nav > li > a:hover {
    text-decoration: none;
}