我不是一个大问题的粉丝,提供一些标准,没有推理的解决方案是可以接受的,但在这种情况下,我也有一个：没有
JavaScript兼容性,除了
Modernizr.(原因是他们也减慢了页面的下降许多.)
我使用新的和漂亮的CSS3 flex-Box创建一个菜单,显示一些额外的链接,如果有一些额外的空间.您可以看到(希望)的工作演示here.
最大的问题是：如何使用(咳嗽)烦人的(咳嗽)Internet Explorer和旧浏览器,而不使用有名的FlexieJS库？除了为菜单(ul)设置最大百分比宽度(这不是真的有效)之外,只需使用css2即可实现此功能？你能不能指出我正确的方向？谢谢！
UPDATE
我再试一次,但仍然无法自己弄清楚.任何帮助真的很感激！感谢很多=)你可以找到我的尝试here.
解决方法
我知道这是一个旧的线程,但我认为它应该得到一个适当的答案,你要求的.由于您使用Modernizr,因此我们可以默认为内嵌块,但是检测FlexBox是否可用并覆盖(使用好的ol’或者好的新的渐进增强).为了使这个工作,你可以切换#admin-links和#common-links.以下是代码,它在IE6中有效.还提供
demo.
HTML
<div id="wrapper">
<div id="navigation">
<ul id="admin-links">
<li>
<a href="#">Important Link</a>
</li>
<li>
<a href="#">Important Link</a>
</li>
</ul>
<ul id="common-links">
<li>
<a href="#">Important Link</a>
</li>
<li>
<a href="#">Important Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
<li>
<a class="omittable" href="#">Omittable Link</a>
</li>
</ul>
</div>
<div id="content">
<p>Hello world.</p>
<p>This is supposed to be content.
But only thing we care is the menu (Sorry about that.)
</p>
<p>Page width decreases,some items magically disappear.<br />
Which is <strong>intended</strong>.<br />
You can do that by pulling the frame bars around.
</p>
</div>
</div>
CSS
#wrapper {
background: #eee;
width: 100%;
min-width: 450px;
max-width: 700px;
margin: 0 auto;
}
#navigation {
height: 40px;
background: #f00;
width: 100%;
overflow: hidden;
}
.flexBox #navigation {
-moz-Box-align: stretch;
-moz-Box-orient: horizontal;
-webkit-Box-align: stretch;
-webkit-Box-orient: horizontal;
-moz-Box-orient: horizontal;
-webkit-Box-orient: horizontal;
-ms-Box-orient: horizontal;
Box-orient: horizontal;
-moz-Box-align: stretch;
-webkit-Box-align: stretch;
-ms-Box-align: stretch;
Box-align: stretch;
-moz-Box-direction: reverse;
-webkit-Box-direction: reverse;
-ms-Box-direction: reverse;
Box-direction: reverse;
display: -moz-Box;
display: -webkit-Box;
display: -ms-Box;
display: Box;
float: none;
}
#navigation ul {
overflow: hidden;
z-index: 990; letter-spacing: -4px;
}
#common-links {
overflow: hidden;
}
.flexBox #common-links {
-moz-Box-flex: 1;
-webkit-Box-flex: 1;
-ms-Box-flex: 1;
Box-flex: 1;
}
#navigation li {
display: inline-block;
letter-spacing: normal; height: 40px;
}
#navigation li a {
padding: 10px;
display:inline-block;
*display: inline;
zoom: 1;
background: #0c0;
outline: solid 1px #0c0;
}
#navigation a.omittable {
background: #0f0;
}
#admin-links {
float: right;
}
.flexBox #admin-links {
float: none;
}
#admin-links ul {
white-space: nowrap;
}
