解决UC浏览器或微信浏览器上flex兼容问题
Posted haoxl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了解决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="input"/> </div> </body> </html>
以上是关于解决UC浏览器或微信浏览器上flex兼容问题的主要内容，如果未能解决你的问题，请参考以下文章