精华内容
下载资源
问答
  • flex布局分为旧版本...所以不同版本浏览器肯定存在兼容问题。Android2.3 开始就支持旧版本 display:-webkit-box;4.4 开始支持标准版本 display: flex;IOS6.1 开始支持旧版本 display:-webkit-box;7.1 开始支持...

    flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;,以及现在的标准版本display: flex;。所以不同版本浏览器肯定存在兼容问题。

    Android

    2.3 开始就支持旧版本 display:-webkit-box;

    4.4 开始支持标准版本 display: flex;

    IOS

    6.1 开始支持旧版本 display:-webkit-box;

    7.1 开始支持标准版本display: flex;

    PC

    ie10开始支持,但是IE10的是-ms形式的。

    盒子的兼容性写法

    在低版本安卓系统中。因为所有都是向下兼容的,需要把旧语法写在底下个别不兼容的移动设置才会识别,那些带box的一定要写在最下面。

    .box{

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    }

    .flex1 {

    -webkit-flex: 1; /* Chrome */

    -ms-flex: 1 /* IE 10 */

    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1; /* OLD - Firefox 19- */

    }

    盒模型(支持所有控件)

    * {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    展开全文
  • 写在前面: vue 配合 element-ui 布局时,因element布局容器默认flex布局,而ie9不兼容。为了使ie9上能良好的表现弹性布局,查找到以下博客,完美解决。xi一、float 布局float使元素脱离文档流,并且父元素内的其他...
       写在前面:

       vue 配合 element-ui 布局时,因element布局容器默认flex布局,而ie9不兼容。为了使ie9上能良好的表现弹性布局,查找到以下博客,完美解决。xi

    一、float 布局

    float使元素脱离文档流,并且父元素内的其他的行内元素或者文本都会围绕着他放置。

    下面我们现写一段float的布局代码,来看一下float的作用。

    <div class= "fcont" >
         <span class= "fspan" >我是行内元素1</span>
         <div class= "fleft" >
             看,我跑左边了<Br/>
             而且我不受父元素控制<br>
             哈哈哈
         </div>
         <div class= "fright" >
             嘿,那我站右边<Br/>
             我也不受父元素控制。<br/>
             哈哈哈
         </div>
         <span class= "fspan" >我是行内元素2</span>
         <div class= "fafter" >我是浮动元素后面内容</div>
    </div>
    <div class= "fafter" >我是浮动元素后面内容</div>

    样式代码如下:

    .fcont{
         border:1px solid darkorange;
         box-sizing:border-box;
         padding:8px;
      }
    .fleft{
         float:left;
         border:1px solid lightcoral;
         background: #fff;
         padding:12px;
         line-height:26px;
    }
    .fright{
         float:right;
         border:1px solid lightseagreen;
         background: #fff;
         padding:12px;
         line-height:26px;
    }
    .fafter{
         line-height:32px;
         margin-top:12px;
         text-align:center;
         background:darkorange;
      }
    .fspan{
         border:1px solid darkgoldenrod;
         margin-left:6px;
      }

    代码运行效果如下:

    float2.png

    从上图效果看,float:left的元素跑到的左边,float:right的元素跑到了右边。

    父元素内的两个span都围绕着左浮动元素,因为默认是text-align:left,如果设置text-align:right,两个span就会围绕右浮动元素。

    两个浮动元素已经脱离了文档流,他们并没有撑开父元素的高度。并且其后的block元素也没有跟随在他们后面,而是跟随在非浮动元素的后面。

    这已经使得我们的布局错落了,我们要想让浮动元素撑开父元素,回归文档流,就需要用到clear来实现这一效果。

    二、clear both清除浮动

    clear用来清除浮动,可以用在浮动元素上,也可以用在非浮动元素上。

    clear:left用来清除左浮动,

    clear:right用来清除右浮动,

    clear:both清除所有的浮动。

    三、clear 用在float元素上

    我们把上面的fright元素给他添加一个clear both样式,

    并将两个block的text-align改为left,这样效果看的更明显些。

    .fright{
         float:right;
         border:1px solid lightseagreen;
         background: #fff;
         padding:12px;
         line-height:26px;
         clear:both;
    }
    .fafter{
         line-height:32px;
         margin-top:12px;
         text-align:left;
         background:darkorange;
      }

    效果如下:

    floatclear.png

    可以看到,右浮动元素的顶部是从左浮动元素的底部开始的。但是依旧没有撑开父元素,这说明应用在浮动元素上的clear both只是对浮动元素起作用,对文档流中的元素不起作用。

    四、clear both应用在非浮动元素上

    我们把clear both样式加在非浮动元素上面,注意只能加在display:block的块状元素上,在inline的行内元素上不起作用。

    .fafter{
         line-height:32px;
         margin-top:12px;
         text-align:center;
         background:darkorange;
         clear:both;
      }

    效果如下:

    clearboth.png

    加在非浮动元素上的clear:both清除了浮动元素对其后面块状元素的影响,并且让浮动元素撑开了父元素。达到了一般布局的目的。

    清除浮动这个功能样式我们还可以利用:before,after伪类来实现。

    :after 伪类清除浮动的代码

    .clearfix:after{
         content: "" ;
         display:block;
         clear:both;
      }

    content属性是必须的,不能缺少。有content属性才能在父元素尾部添加内容。通过设置display:block使其成为块状元素。clear:both用来达到清除浮动的功能。

    给fcont父元素添加clearfix样式后效果如下:

    clearfix.png

    通过伪类实现的clear both清除浮动后,float元素可以撑开父元素,并且父元素后的块状元素也不受float影响了。但是父元素fcont内部的块元素还是受float影响。所以通过伪类实现clear both 清除浮动的功能,我们要避免在包含浮动的父元素中使用块状元素。

    去除父元素内的块状元素后效果如下:

    clearfix2.png

    完美,实现了清浮动的效果。体现了clear both的价值了。

    网上好多兼容性清浮动代码如下:

    .clearfix{*zoom:1;}
    .clearfix:before,.clearfix:after{
         content: "" ;
         display:table;
         line-height:0;
         visibility:hidden;
    }
    .clearfix:after{
         clear:both;
    }

    上面这段代码,据说是兼容到IE6,我觉得没必要用。反正从我进入前端这行到现在,我都没见过IE6浏览器,即使前些年在银行外包的时候用过最老的IE也是IE7。而现在兼容性要求最强烈的公司也最多要求到IE8,直接采用一行clearfix的清浮动,完全能满足我们的代码需求。

    float和clear both的妙用,实现flex布局

    先给个demo:float clear实现flex布局

    效果图如下:

    clearflex.png

    你可以拖动浏览器大小,中间内容是不同的,跟横向的flex效果是一样一样的。他跟margin负值的双飞翼布局不同,margin负值是两侧的宽度是确定的,我们这个布局的妙处就是两个float元素的宽度是不确定的,根据内容自适应的宽度。

    上一下代码

    样式代码如下:

    .dfcont{
         border:1px solid darkorange;
         box-sizing:border-box;
         padding:8px;
      }
    .dfleft{
         float:left;border:1px solid lightcoral;
         background: #fff;
         padding:12px;
         line-height:26px;
      }
    .dfright{
         float:right;border:1px solid lightseagreen;
         padding:12px;
         line-height:26px;
      }
    .dfafter{
         line-height:32px;
         margin-top:12px;
         text-align:left;
         background:darkorange;
         overflow:hidden;
      }
    .dclearfix{*zoom:1;}
    .dclearfix:after{
         content: "" ;
         display:block;
         clear:both;
      }
    .dfinner{
         margin:0 12px;
         background:darkseagreen;
         white-space:nowrap;
         overflow:hidden;
         text-overflow:ellipsis;
      }

    html结构代码如下:

    <div class= "dfcont dclearfix" >
         <div class= "dfleft" >
             看,我跑左边了<Br/>
             而且我不受父元素控制<br>
             哈哈哈
         </div>
         <div class= "dfright" >
             嘿,那我站右边<Br/>
             我也不受父元素控制。<br/>
             哈哈哈
         </div>
        <div class= "dfafter" >
            <div class= "dfinner" >
            我是浮动元素后面内容,我要实现flex特性的功能。
            哈哈哈哈哈哈,我是flex的古老版实现方式。
            </div>
        </div>
    </div>

    跟clearfix加上*zoom:1后,测试兼容到IE7,IE6没测,猜测应该也兼容。

    这个布局实现的原理就是,根据block元素虽然不会围绕float元素,但是他的内容区域会被float元素的宽度所占据。所以我们就可以利用这一点,让block元素的内容自适应剩余的宽度,达到flex:1弹性布局的特性。

    float clear both结语

    对于有一定经验的前端来说,float,clear both再熟悉不过了,但是孰能生巧,只有深刻理解他们的原理,才能在基础用法上升华出更优秀的布局。

    转载自:妹纸前端-www.webfront-js.com. ---  http://www.webfront-js.com/articaldetail/48.html



    展开全文
  • 随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要...

    随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要支持,不支持的话,只能是你这个页面,这个产品被淘汰。

    那么为了不被淘汰,我们就要做些兼容性处理。

    我写页面的时候用到过很多的flex布局,觉得非常好用。下面附上一篇不错的flex布局介绍的文章。

    Flex 布局教程想了解的可以自己去看看这篇博文,或者自己百度,这里先部多做介绍,我们主要来说一说flex布局的兼容性问题。

    why?

    大家可能想问了,flex布局为什么会存在兼容性问题啊?

    之所以存在兼容性问题,是因为技术在不断的更新,有些旧的浏览器只支持旧语法的书写方式,所以就出现所谓的兼容性问题。

    what?

    那么新旧版本是什么?

    flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;,以及现在的标准版本display: flex;。所以如果你只是写新版本的语法形式,是肯定存在兼容性问题的。

    Android

    2.3 开始就支持旧版本 display:-webkit-box;

    4.4 开始支持标准版本 display: flex;

    IOS

    6.1 开始支持旧版本 display:-webkit-box;

    7.1 开始支持标准版本display: flex;

    PC

    ie10开始支持,但是IE10的是-ms形式的。

    下面是各个浏览器的支持情况

    how?

    所以我们该如何进行兼容性的写法呢?

    盒子的兼容性写法

    .box{

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    }

    子元素的兼容性写法

    .flex1 {

    -webkit-box-flex: 1/* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1;/* OLD - Firefox 19- */

    -webkit-flex: 1; /* Chrome */

    -ms-flex: 1 /* IE 10 */

    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下,个别不兼容的移动设置才会识别,哪些是旧的语法,你懂的。那些带box的一定要写在最下面即可。

    所以上面的兼容写法应该是这样的才对:

    .box{

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    }

    .flex1 {

    -webkit-flex: 1; /* Chrome */

    -ms-flex: 1 /* IE 10 */

    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: 1/* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1;/* OLD - Firefox 19- */

    }

    ---------------------

    原文:https://blog.csdn.net/u010130282/article/details/52627661

    展开全文
  • 今天还是变谈CSS3里的flex怎么处理兼容flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安...

    很久不写博文,之前的长时间不上都关闭了,但随着工作时间长越来越长,对知识的积累和总结还真的是很重要的。所以奉劝码农们每天都还是要抽出来一点时间总结点东西,以后对你受益匪浅!!今天还是变谈CSS3里的flex怎么处理兼容的

    flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安卓4.3以后版本里。那就不好用了,今天咱们就说下如果写flex才能保证兼容性。

    flex之所以有兼容性。是因为w3c从09到现在更新了很多次,所以有一些浏览器只是支持旧语法的书定方式,flex属性有很多种,今天主要说常用的等比设置和居中这两块

    一、旧语法

    .box{

    display: -moz-box;    /*Firefox*/

    display: -webkit-box; /*Safari,Opera,Chrome*/

    display: box;

    }

    2.容器属性

    1)box-pack box-pack属性总共有4个值:

    .box{    box-pack: start | end | center | justify;

    /*主轴对齐:左对齐(默认) | 右对齐 | 居中对齐 | 左右对齐*/}

    3.子元素属性

    box-flex 属性:

    .item{

    -moz-box-flex: 1.0;    /*Firefox*/

    -webkit-box-flex: 1.0; /*Safari,Opera,Chrome*/

    box-flex: 1.0;}

    二、新语法

    1.容器的display属性

    .item{

    -moz-box-flex: 1;     /*Firefox*/

    -webkit-box-flex: 1;  /*Safari,Opera,Chrome*/

    box-flex: 1;

    }

    .box{                              /*行内flex*/

    display: -webkit-inline-flex; /*webkit*/

    display:inline-flex;

    }

    2.容器样式

    .box{    flex-direction: row | row-reverse | column | column-reverse;    /*主轴方向:左到右(默认) | 右到左 | 上到下 | 下到上*/

    flex-wrap: nowrap | wrap | wrap-reverse;    /*换行:不换行(默认) | 换行 | 换行并第一行在下方*/

    flex-flow:  || ;    /*主轴方向和换行简写*/

    justify-content: flex-start | flex-end | center | space-between | space-around;    /*主轴对齐方式:左对齐(默认) | 右对齐 | 居中对齐 | 两端对齐 | 平均分布*/

    align-items: flex-start | flex-end | center | baseline | stretch;    /*交叉轴对齐方式:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/

    align-content: flex-start | flex-end | center | space-between | space-around | stretch;    /*多主轴对齐:顶部对齐(默认) | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 上下平均分布*/}

    3.子元素属性

    .item{    order: ;    /*排序:数值越小,越排前,默认为0*/

    flex-grow: ; /* default 0 */

    /*放大:默认0(即如果有剩余空间也不放大,值为1则放大,2是1的双倍大小,以此类推)*/

    flex-shrink: ; /* default 1 */

    /*缩小:默认1(如果空间不足则会缩小,值为0不缩小)*/

    flex-basis:  | auto; /* default auto */

    /*固定大小:默认为0,可以设置px值,也可以设置百分比大小*/

    flex: none | [  ? ||  ]    /*flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto,*/

    align-self: auto | flex-start | flex-end | center | baseline | stretch;    /*单独对齐方式:自动(默认) | 顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 文本基线对齐*/}

    兼容写法:

    1.盒子的兼容写法

    .box{

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */}

    2.子元素的兼容写法:

    .flex1 {

    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1;    /* OLD - Firefox 19- */

    -webkit-flex: 1;   /* Chrome */

    -ms-flex: 1       /* IE 10 */

    flex: 1;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    }

    我要说的主要部分来了。。

    这种兼容写法不一定起效的。尤其是在底版本安卓系统中。因为什么呢?因为所有都是向下兼容的,所以写法的顺序一定要写好了才起作用。就是把旧语法写在底下,个别不兼容的移动设置才会识别,哪些是旧的语法,你懂的。那些带box的一定要写在最下面即可。所以上面的兼容写法应该是这样的才对

    .box{

    display: -webkit-flex; /* 新版本语法: Chrome 21+ */

    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

    display: -moz-box; /* 老版本语法: Firefox (buggy) */

    display: -ms-flexbox; /* 混合版本语法: IE 10 */

    }

    .flex1 {

    -webkit-flex: 1;   /* Chrome */

    -ms-flex: 1       /* IE 10 */

    flex: 1;         /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-flex: 1   /* OLD - iOS 6-, Safari 3.1-6 */

    -moz-box-flex: 1;    /* OLD - Firefox 19- */

    }

    如果你不把握好这个先后顺序,总是调整不出来完整的兼容样式。

    展开全文
  • 上网搜索了有关资料,发现cssflex 经历了版本的更新,我们现在技术人员写flex布局,都是display: flex;这样写的,确实没错,这是现在的标准版本。但还有个旧版本:display: box; 以及还有个过渡版本:display: ...
  • CSS样式兼容IE6、IE7、IE8、FF火狐浏览器的方法
  • CSSflex兼容

    万次阅读 多人点赞 2016-09-22 21:06:52
    随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然我们的技术不能是被拍死在沙滩上,我们还要...
  • css3 flex兼容

    千次阅读 2016-10-10 10:46:45
    flex兼容
  • 今天还是变谈CSS3里的flex怎么处理兼容flex是个非常好用的属性,如果说有什么可以完全代替 float 和 position ,那么肯定是非它莫属了,虽然现在低版本浏览器不支持,可是对于移动来说兼容性不是问题,可是在安...
  • css判断ie版本才引用样式或css文件 <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <...
  • /* 容器盒子兼容处理 */ .box { display: -webkit-flex; /* 新版本语法 Chrome 21+ */ display: flex; /* 新版本语法 Opear 12.1 Firefox 22+ */ display: -webkit-box; /* 新版本语法 Safari, ios, Android ...
  • [css]关于flexIE11中不兼容问题

    千次阅读 2020-08-03 20:34:29
    IE11中使用了display:flex下的子控件不能正确显示,删掉属性后可以显示,但是位置错乱. 在网上搜索了下,有各种各样的说法,但是都未能解决问题. 那索性不用flex吧,直接通过left/top/right这些来固定控件试试,我的...
  • 十年积累,div+css 完全兼容 ie6 ie7 IE8 IE9 和firefox方法
  • css flex布局iOS8兼容性问题

    千次阅读 2018-07-25 14:04:34
    css flex布局iOS8兼容性问题,大多数情况下都能够通过兼容性写法解决,比如: div { display: -webkit-flex; display: flex; -webkit-flex: 1; flex: 1; flex-direction: row; -webkit-flex-direction: row...
  • flex布局兼容IE10

    千次阅读 2020-02-24 13:46:06
    IE10浏览器中,使用flex布局的常用兼容性代码: /*display*/ .display_flex{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .display_flex > *{ display: block;...
  • CSS:flex布局浏览器兼容处理 ie8, ie9

    千次阅读 2020-12-21 16:01:00
    关于flex的W3C规范:http://dev.w3.org/csswg/css-flexbox-1/ 浏览器兼容性可以参考CanIUse:http://caniuse.com/#feat=flexbox 根据CanIUse的数据可以总结如下: IE10部分支持2012,需要-ms-前缀 Android4.1/...
  • IE9兼容flex布局,以及CSS3

    千次阅读 2020-11-26 09:58:42
    大家习惯上了flex布局,如果要兼容IE9,怎么办呢,先看看flex的兼容: 笔者从一位大佬偶然得知,一个兼容flex的方法,效果图如下: IE9能看到css3的效果,还有flex局部 下面 demo代码。 // An highlighted block <...
  • 本次记录的主要内容在于 兼容写法  下面的测试代码为常用的;具体的属性值,按照实际需求,自行修改 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
  • 水平且垂直居中.box{border:... /*viewpointheight 视点高度*/display:flex;justify-content:center;align-items:center;flex-direction:column;}Flex(Flexible Box,弹性布局),用来为盒状模型提供最大的灵活性。设...
  • CSS3之flex兼容

    2017-05-08 10:34:33
    flex布局分为旧版本dispaly...所以如果你只是写新版本的语法形式,是肯定存在兼容性问题的。 Android  2.3 开始就支持旧版本 display:-webkit-box; 4.4 开始支持标准版本 display: flex; IOS  6
  • 兼容浏览器版本Chrome 21+Opera 12.1+Firefox 22+Safari 6.1+IE 10+浏览器对最新flexbox规范的支持情况:Chrome 29+Firefox 28+Internet Explorer 11+Opera 17+Safari 6.1+ (前缀 -webkit-)Android 4.4+iOS 7.1+ ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,388
精华内容 4,555
热门标签
关键字:

cssflex兼容ie