flex弹性布局兼容性讨论

    昨天下午在某个js群里面偶然看到一个在讨论css3的flex属性兼容问题,其中有一个人说UC不支持flex,劝大伙进来别用。我看到这里心里就奇怪了,flex自己还是用过的,没理由不支持的啊。

    第一、UC是U3内核,也是基于webkit内核

    UC的内核是叫U3,这点没错,但是实际上也是基于webkit来开发的。和国产的360这些浏览器一个本质(不是基于IE就是基于webkit),用的都是人家的内核,只是在别人的内核基础上进行二次开发,加入一堆垃圾和广告而已!就像手机系统一样,主流都是IOS、WP、安卓,像小米和魅族的MIU和FLYME系统,说白了,还不是一个安卓系统,只是做个二次开发,换个皮肤而已。。。。

    第二、UC是支持flex弹性布局的

    在群里有人提出UC不支持flex,于是自己做了个demo。在这过程,我刚好发现了自己的写法在FF下的一个bug,所以在这里分享给大家:

    Flex Demo

    效果可以自己在上面demo测试,下面主要看一下具体代码:

    HTML

<div class="nav">
    <a href="">flex box1</a>
    <a href="">flex box2</a>
    <a href="">flex box3</a>
    <a href="">flex box4</a>
</div>

    CSS

.nav{
 display: -webkit-flex;
  display: -moz-flex;
  display: -o-flex;
  display: -ms-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flexbox;
  display: flex;
 overflow: hidden;
 width: 100%;//火狐不加宽度是无效的
}
.nav a{
 display: block;
 height:40px;
 line-height: 40px;
 color:#fff;
 text-align: center;
 border:1px solid #fff;
 background: #f60;
 text-decoration: none;
 -moz-flex: 1;
  -webkit-flex: 1;
  -webkit-box-flex:1;
  -o-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

    在写这种css3属性时,为了保险还是尽可能的加上各个浏览器的前缀,因为浏览器巨多,就连chrome(也有不同版本)也不能保证完全支持css3所以属性。这里需要特意提一下的是,在火狐下,弹性布局的父层(也就是上面demo的nav)一定要加宽度才能使弹性布局生效,大伙可以测试验证下。


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2014/348.html)

分享到:

关注w3cmark
微信公众号 w3cmark_com