解决UC浏览器或微信浏览器上flex兼容问题
2016-10-09 18:48
148 查看
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下
使用flex:1;时也要添加如下兼容性写法:
但是,一定要注意:如果作用于flex:1的元素为input或button时,只用flex:1;是不起作用的,还要加上display:block;才能起作用。
以下为小案例
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;
使用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;才能起作用。
以下为小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Demo for flex on uc</title>
<style type="text/css">
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>
</head>
<body>
<h2>左右排列,上下居中</h2>
<div class="demo1">
<div>flex</div>
<div>flex</div>
<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>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>
</body>
</html>
相关文章推荐
- 浏览器兼容问题解决方法
- 【转载】解决浏览器和discuz7.0论坛不兼容的方法,解决快捷回复弹出下载窗口的问题
- IE7下confirm和disabled的问题及解决(asp.net),同时兼容标准浏览器
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 解决浏览器兼容问题
- 浏览器兼容:Web标准化建站(DIV+CSS)必看的常见问题解决方法
- DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!
- 12种Javascript解决常见浏览器兼容问题的方法
- 使用CSS Expression解决某些浏览器兼容问题
- 解决Js解析xml浏览器不兼容问题及省市区三级联动实现
- 浏览器兼容问题解决方法
- div+css浏览器兼容问题解决方法
- 12种Javascript解决常见浏览器兼容问题的方法
- 解决Flex程序在chrome,safari,IE9等浏览器中history的后退与前进问题
- Javascript解决常见浏览器兼容问题的12种方法
- 解决浏览器兼容问题的一个CSS
- 12种Javascript解决常见浏览器兼容问题的方法
- extjs 怎么解决浏览器兼容问题?
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题