解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
2017-06-03 11:30
295 查看
在android平台的uc浏览器和微信浏览器中使用display: flex;会出问题。
1.使用display: flex;的时候需要加上display: -webkit-box;
2.使用flex: 1;的时候要加上:
3.使用align-items: center;的时候需要加上:-webkit-box-align: center;
4.使用flex-direction: column;的时候需要加上:
demo案例
1.使用display: flex;的时候需要加上display: -webkit-box;
2.使用flex: 1;的时候要加上:
-webkit-box-flex: 1; -moz-box-flex: 1; -ms-flex: 1;
3.使用align-items: center;的时候需要加上:-webkit-box-align: center;
4.使用flex-direction: column;的时候需要加上:
-webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical;
demo案例
<!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;
}
</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>
</body>
</html>
相关文章推荐
- 解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
- 解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
- 解决UC浏览器、微信浏览器使用display:flex;的兼容性问题
- 解决在IE6下使用display: inline-block;的不兼容性问题
- vs2008与IIS 7.0使用在vista上时出现的问题及解决方法(Internet Explorer 无法显示该页面)(VS2008: IE Cannot Display Web Page)
- 使用Java与Flex建立Socket连接(已解决沙箱问题)
- 在head标签里加一个meta标签让指定ie使用特定内核 解决css在ie中的兼容性问题
- Bootstrap2使用时如何解决兼容性问题
- 对table的tr使用display:block显示colspan失效问题的解决
- 使用asx3m与xstream配合解决flex与java利用httpservice传递xml数据问题
- flex 4.0 解决在MODULE中使用timer实时刷新数据,卸载MODULE后还在执行的问题
- 灵活使用编译宏解决平台或版本的兼容性问题
- 解决用JavaScript隐藏再显示Flex后不能正常使用问题
- Win10使用兼容性模式来解决应用无法运行的问题
- 初学Flex,在使用Webservice时遇到Xml数据绑定的一个问题,试了N个方案,均没解决。
- 使用AmfNet时Flex中中文乱码问题的解决
- Flex中如何使用A标签解决Text中给部分文字加连接的问题。
- Flex中Module的使用以及内存泄露问题解决方法
- php和java的memcached使用的兼容性问题解决过程
- jQuery 使用ajax提交遇到兼容性问题及解决方法