Menu

UC浏览器的兼容问题,flexbox兼容性写法美高梅开户

flex和box兼容性写法,flexbox兼容性写法

display: -webkit-box; /* Chrome 4+,
Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */

display:
-webkit-flex; /*
Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */

display: flex; /* Chrome 29+, Firefox
22+, IE 11+, Opera 12.1/17/18, Android 4.4+
*/

display :
-webkit-box ; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display :
-moz-box ; /* Firefox 17- */ display : -webkit-fle…

在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,

如下

/* OLD – iOS 6-, Safari 3.1-6 */

display: -webkit-box;     

/* OLD – Firefox 19- (buggy but mostly works) */

display: -moz-box;       

/* TWEENER – IE 10 */

display: -ms-flexbox;     

/* NEW – Chrome */

display: -webkit-flex;  

display: flex;

使用flex:1;时也要添加如下兼容性写法:-webkit-box-flex: 1;     

 /* OLD – iOS 6-, Safari 3.1-6 */           

 -moz-box-flex: 1;        

 /* OLD – Firefox 19- */           

 width: 20%;             

 /* For old syntax, otherwise collapses. */            

-webkit-flex: 1;         

 /* Chrome */            

-ms-flex: 1;             

 /* IE 10 */           

 flex: 1;                  

/* NEW, Spec – Opera 12.1, Firefox 20+ */

但是,一定要注意:如果作用于flex:1的元素为input或button时,只用flex:1;是不起作用的,还要加上display:block;才能起作用。以下为小案例复制代码

<style>

html,body{

padding: 0;

margin: 0;

}

.demo1{

background-color: yellow;

text-align: center;

height: 80px;

display: -webkit-flex;

display: flex;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-align: center;

}

.demo1>div{

background-color: green;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo2{

background-color: yellow;

width: 80px;

height: 200px;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

align-items: center;

/* for uc */

display: -webkit-box;

-webkit-box-orient: vertical;

-moz-box-orient: vertical;

box-orient: vertical;

-webkit-box-align: center;

}

.demo2>div{

background-color: green;

width: 40px;

margin: 2px;

-webkit-flex: 1;

flex: 1;

/* for uc */

-webkit-box-flex: 1;

-moz-box-flex: 1;

-ms-flex: 1;

}

.demo3{

text-align: center;

padding: 0 6px;

display: -webkit-box;      /* OLD – iOS 6-, Safari 3.1-6 */

display: -moz-box;        /* OLD – Firefox 19- (buggy but mostly works)
*/

display: -ms-flexbox;      /* TWEENER – IE 10 */

display: -webkit-flex;    /* NEW – Chrome */

display: flex;

}

.demo3 .btn{

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

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

width: 20%;              /* For old syntax, otherwise collapses. */

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

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

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

display:block;

height: 40px;

color:#fff;

text-align: center;

line-height: 40px;

cursor: pointer;

font-size: 17px;

font-weight: 700;

margin-top:0px;

margin-bottom:20px;

font-family: “方正正中黑简体”, “Microsoft YaHei”, “sans-serif”;

-webkit-appearance : none ;  /*解决iphone safari上的圆角问题*/

}

.prev {

background-color: #FEBC21;

margin-right:6px;

}

.next {

background-color: #FE9121;

}

</style>

<h2>左右排列,上下居中</h2>

<div class=”demo1″>

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

<h2>上下排列,左右居中</h2>

<div class=”demo2″>

<div>flex</div>

<div>flex</div>

<div>flex</div>

</div>

美高梅开户,<h2>左右排列,元素为input或button</h2>

<div class=”demo3″>

<button class=”btn prev”>button</button>

<input type=”button” class=”btn next” id=”btn” value=”input”>

</div>

在position:fixed的这些情况下,需要使用冒泡的方式才能触发绑定的事件

标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图