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

  1. display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  2. display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  3. display: -ms-flexbox; /* TWEENER - IE 10 */
  4. display: -webkit-flex; /* NEW - Chrome */
  5. display: flex;

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

  1. -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  2. -moz-box-flex: 1; /* OLD - Firefox 19- */
  3. width: 20%; /* For old syntax, otherwise collapses. */
  4. -webkit-flex: 1; /* Chrome */
  5. -ms-flex: 1; /* IE 10 */
  6. flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */

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

以下为小案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6. <title>Demo for flex on uc</title>
  7. <style type="text/css">
  8. html,body{
  9. padding: 0;
  10. margin: 0;
  11. }
  12. .demo1{
  13. background-color: yellow;
  14. text-align: center;
  15. height: 80px;
  16. display: -webkit-flex;
  17. display: flex;
  18. -webkit-align-items: center;
  19. align-items: center;
  20. /* for uc */
  21. display: -webkit-box;
  22. -webkit-box-align: center;
  23. }
  24. .demo1>div{
  25. background-color: green;
  26. margin: 2px;
  27. -webkit-flex: 1;
  28. flex: 1;
  29. /* for uc */
  30. -webkit-box-flex: 1;
  31. -moz-box-flex: 1;
  32. -ms-flex: 1;
  33. }
  34. .demo2{
  35. background-color: yellow;
  36. width: 80px;
  37. height: 200px;
  38. display: -webkit-flex;
  39. display: flex;
  40. -webkit-flex-direction: column;
  41. flex-direction: column;
  42. -webkit-align-items: center;
  43. align-items: center;
  44. /* for uc */
  45. display: -webkit-box;
  46. -webkit-box-orient: vertical;
  47. -moz-box-orient: vertical;
  48. box-orient: vertical;
  49. -webkit-box-align: center;
  50. }
  51. .demo2>div{
  52. background-color: green;
  53. width: 40px;
  54. margin: 2px;
  55. -webkit-flex: 1;
  56. flex: 1;
  57. /* for uc */
  58. -webkit-box-flex: 1;
  59. -moz-box-flex: 1;
  60. -ms-flex: 1;
  61. }
  62. .demo3{
  63. text-align: center;
  64. padding: 0 6px;
  65. display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
  66. display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
  67. display: -ms-flexbox; /* TWEENER - IE 10 */
  68. display: -webkit-flex; /* NEW - Chrome */
  69. display: flex;
  70. }
  71. .demo3 .btn{
  72. -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  73. -moz-box-flex: 1; /* OLD - Firefox 19- */
  74. width: 20%; /* For old syntax, otherwise collapses. */
  75. -webkit-flex: 1; /* Chrome */
  76. -ms-flex: 1; /* IE 10 */
  77. flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  78. display:block;
  79. height: 40px;
  80. color:#fff;
  81. text-align: center;
  82. line-height: 40px;
  83. cursor: pointer;
  84. font-size: 17px;
  85. font-weight: 700;
  86. margin-top:0px;
  87. margin-bottom:20px;
  88. font-family: "方正正中黑简体", "Microsoft YaHei", "sans-serif";
  89. -webkit-appearance : none ; /*解决iphone safari上的圆角问题*/
  90. }
  91. .prev {
  92. background-color: #FEBC21;
  93. margin-right:6px;
  94. }
  95. .next {
  96. background-color: #FE9121;
  97. }
  98. </style>
  99. </head>
  100. <body>
  101.  
  102. <h2>左右排列,上下居中</h2>
  103. <div class="demo1">
  104. <div>flex</div>
  105. <div>flex</div>
  106. <div>flex</div>
  107. <div>flex</div>
  108. <div>flex</div>
  109. </div>
  110.  
  111. <h2>上下排列,左右居中</h2>
  112. <div class="demo2">
  113. <div>flex</div>
  114. <div>flex</div>
  115. <div>flex</div>
  116. <div>flex</div>
  117. <div>flex</div>
  118. </div>
  119.  
  120. <h2>左右排列,元素为input或button</h2>
  121. <div class="demo3">
  122. <button class="btn prev" >button</button>
  123. <input type="button" class="btn next" id="btn" value="input"/>
  124. </div>
  125. </body>
  126. </html>

解决UC浏览器或微信浏览器上flex兼容问题的更多相关文章

  1. 移动端浏览器和微信浏览器上禁止body的滚动条

    一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...

  2. 如何判断页面是qq浏览器还是微信浏览器打开

    // 判断是QQ浏览器还是微信浏览器的js代码isWx = function() { var ua = navigator.userAgent.toLowerCase(); return ua.mat ...

  3. PHP JS判断浏览器,微信浏览器

      微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...

  4. 通过js区分移动端浏览器(微信浏览器、QQ浏览器、QQ内置浏览器)

    由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...

  5. 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器

    1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...

  6. 判断手机浏览器还是微信浏览器(PHP)

    //判断是否 微信浏览器 function isWeixin1() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== fa ...

  7. 解决手机浏览器和微信中select中border:none;无用和去掉小三角

    设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...

  8. C#判断用户是否使用微信浏览器,并据此来显示真实内容或二维码

    平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...

  9. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

随机推荐

  1. bzoj4443[SCOI2015]小凸玩矩阵

    题意:一个n*m的矩阵(n<=m<=250),要求选出n个数(每行,每列最多选一个),求第k大数的最小值. 首先第k大的意思是从大到小的第k个数(我读错了,WA了一次还以为算法不对...) ...

  2. [虚拟机]Virtual Box的使用--共享文件夹

    最近为系统测试使用了虚拟机,VM太卡,所以使用了VBox,运行效果还不错 为了主机和客户机之前方便进行数据传输,一般采用文件夹共享的方式(当然,可以直接拖拽) 1,直接拖拽,需要做如下设置 主要的是“ ...

  3. react native 环境配置

    1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...

  4. web应用中浏览器与服务端的编码和解码

    转自:http://blog.sina.com.cn/s/blog_87cb63e50102w2b6.html 以下为正文: ************************************* ...

  5. win7系统的右键菜单只显示一个白色框不显示菜单项 解决办法

    如上图所示,桌面或其他大部分地方点击右键菜单,都只显示一个白色框,鼠标移上去才有菜单项看,并且效果很丑 解决办法: 计算机-右键-属性-高级-性能-设置-视觉效果-淡入淡出或滑动菜单到视图,将其前面的 ...

  6. ADO.NET--收藏整理别人的教程

    本文所有内容均从前辈的博客中收集整理而来,仅供自己学习参考的时候快速访问用. ADO.NET入门教程(一) 初识ADO.NET ADO.NET入门教程(二)了解.NET数据提供程序 ADO.NET入门 ...

  7. Nginx 和 IIS 实现动静分离

    前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...

  8. ThinkPHP的URL访问

    url访问 http://www.kancloud.cn/manual/thinkphp5/118012 ThinkPHP5.0在没有启用路由的情况下典型的URL访问规则是: http://serve ...

  9. AssetBundle

    AssetBundle是Unity推荐的一种资源打包方式,与不使用AssetBundle相比,它有如下优点: 1.AssetBundle是经过LZMA压缩过的,所以体积更小. 2.可以将AssetBu ...

  10. REDHAT一总复习1 NTP更改时区,并验证时区设置是否正确

    把计算机时区调整到巴哈马(这是个啥地方?听都没听过.) 使用 tzselect  进行确定时区,并进行可对话性的设置,按照对应的序号,射进去就行了. 使用:timedatectl set-timezo ...