Question

正在修改客户的网站，他们的一个要求是更改导航以适应任何大小的文本。这是诀窍：我不能改变html，只需要css和javascript 。哦，网站上的jquery版本是1.4.4 - 这也不能改变。

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

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

我隔离了有问题的导航并将其放入小提琴right here。如果有人有任何想法，或者知道我可以实施的更好的方式，请告诉我 - 欢迎所有建议！

Answer 1

我在这里有两个版本的jsFiddle进行比较并验证这是你想要的。我稍微清理了一下你的CSS，但我做的主要是在导航中的percentage width上设置li。你有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;
}

IE7中的流体宽度导航

1 个答案: