html – 用于创造性地使用“Flex-Box”的旧(和烦人)浏览器的后备
发布时间:2020-12-14 19:35:23 所属栏目:资源 来源:网络整理
导读:我不是一个大问题的粉丝,提供一些标准,没有推理的解决方案是可以接受的,但在这种情况下,我也有一个:没有 JavaScript兼容性,除了 Modernizr.(原因是他们也减慢了页面的下降许多.) 我使用新的和漂亮的CSS3 flex-box创建一个菜单,显示一些额外的链接,如果有一
我不是一个大问题的粉丝,提供一些标准,没有推理的解决方案是可以接受的,但在这种情况下,我也有一个:没有
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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |