首页 > 代码库 > 解决UC浏览器或微信浏览器上flex兼容问题
解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用，要加上兼容性写法，如下
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="http://www.mamicode.com/input"/></div></body></html>
解决UC浏览器或微信浏览器上flex兼容问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。