html - 为创造性地使用 "Flex-Box"而回退到旧的(和烦人的)浏览器

Question

我不太喜欢那些提供一些标准但没有推理出可接受的解决方案的问题，但在这种情况下，我也有一个问题:没有 JavaScript 的兼容性，除了 Modernizr。 . (原因是他们放慢了页面速度。)

我使用了新奇的 CSS3 flexbox 来创建一个菜单，如果有一些额外的空间，它会显示一些额外的链接。您可以看到一个(希望)工作演示 here .

最大的问题是:如何在不使用有点著名的 FlexieJS 的情况下为(咳嗽)烦人(/咳嗽)的 Internet Explorer 和旧浏览器提供回退。图书馆？除了为菜单 (ul) 设置最大百分比宽度(实际上不起作用)之外，仅使用 css2 是否可以实现这一点？你能至少指出我正确的方向吗？谢谢!

---

更新

我又试了一次，但仍然无法自行解决。非常感谢任何帮助!非常感谢 =) 你可以找到我的尝试 here .

---

Answer 1

我知道这是一个旧线程，但我认为它应该对您的要求做出适当的回答。由于您使用的是 Modernizr，我们可以默认为 inline-block，但会检测 flexbox 何时可用并覆盖(使用 good ol'，或 good new，progressive enhancement)。为了让它工作，你需要切换 #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;
}