我不太喜欢提供一些标准而没有理由说明解决方案是否可以接受的问题，但在这种情况下，我也有一个问题：没有 JavaScript 兼容性，Modernizr 除外。 （原因是页面速度太慢了。）
我使用新奇的 CSS3 flex-box 创建了一个菜单，如果有一些额外的空间，它会显示一些额外的链接。你可以看到一个（希望是）工作演示here。
最大的问题是：如何在不使用有点著名的FlexieJS 库的情况下为（咳嗽）烦人（/咳嗽）Internet Explorer 和旧浏览器提供备用方案？除了为菜单（ul）设置最大百分比宽度（这实际上不起作用）之外，这是否可以仅使用 css2 来实现？你至少能给我指出正确的方向吗？谢谢！
我又试了一次，但还是无法自己解决。非常感谢任何帮助！非常感谢 =) 你可以找到我的尝试here。
【问题讨论】：
标签： html internet-explorer css
我知道这是一个旧线程，但我认为它应该对您的要求给出正确的答案。由于您使用的是 Modernizr，我们可以默认为 inline-block，但会检测 flexbox 何时可用并覆盖（使用好的 ol' 或好的新的渐进增强）。要让它工作，你需要切换#admin-links 和#common-links。下面是代码，它适用于 IE6+。 demo 也可用。
<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>
#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;
}
【讨论】：
作为跨浏览器兼容性的忠实拥护者，我不是 CSS3 的忠实拥护者。我认为，如果您可以使用纯 CSS 实现某些目标，为什么还要使用 Javascript？如果您正在寻找简单的 CSS2 后备方案，请使用 overflow: hidden。我会尽力解释这个简单的属性是如何从本质上达到同样的效果的。
<div>
<ul>
<li>Elem 1</li>
<li>Elem 2</li>
.
.
.
<li>Elem n</li>
</ul>
</div>
width 设置为您希望列表的最大宽度，并将 height 设置为元素的高度。display: inline;，这样它的宽度就可以根据内部元素的大小进行扩展。float: left;（或右），以便它们水平显示。这些元素的height应该和ul的高度一样。通过这样做，任何不适合第一行的元素都将换行到第二行，但由于溢出设置为隐藏，它们根本不会显示。
【讨论】：
如果您想在旧浏览器中使用新功能，您将需要使用 js 来修复它。如果您在 CSS 中为 IE 编写后备代码，您不妨在所有其他浏览器中使用相同的代码。
也许值得一读 http://oli.jp/2011/css3-flexbox/ 和 http://www.xanthir.com/blog/b4580 以及为什么 flexbox 不太可能流行的几个原因 - the CSS templating module 似乎是一个更好的解决方案。
【讨论】：