html – 用于创造性地使用“Flex-Box”的旧(和烦人)浏览器的后备

概述我不是一个大问题的粉丝,提供一些标准,没有推理的解决方案是可以接受的,但在这种情况下,我也有一个：没有 JavaScript兼容性,除了 Modernizr.(原因是他们也减慢了页面的下降许多.) 我使用新的和漂亮的CSS3 flex-box创建一个菜单,显示一些额外的链接,如果有一些额外的空间.您可以看到(希望)的工作演示here. 最大的问题是：如何使用(咳嗽)烦人的(咳嗽)Internet 我不是一个大问题的粉丝,提供一些标准,没有推理的解决方案是可以接受的,但在这种情况下,我也有一个：没有 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  href="#">Omittable link</a>            </li>            <li>                <a  href="#">Omittable link</a>            </li>            <li>                <a  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;}

总结

以上是内存溢出为你收集整理的html – 用于创造性地使用“Flex-Box”的旧(和烦人)浏览器的后备全部内容，希望文章能够帮你解决html – 用于创造性地使用“Flex-Box”的旧(和烦人)浏览器的后备所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。