0

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

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

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

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

4

1 回答 1

3

我在这里有两个版本的 jsFiddle 来比较并验证这就是你想要的。我稍微清理了你的 CSS，但我做的主要事情是在导航中设置percentage widtha 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;
}
于 2013-08-09T20:20:35.677 回答