解决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兼容问题的更多相关文章
- 移动端浏览器和微信浏览器上禁止body的滚动条
一般禁止body滚动的做法就是设置overflow:hidden. 但是很奇怪的发现在移动端浏览器和微信浏览器上这个不起作用,然后我分析了我的写法,就是在body上加了一个class去定义属性,然后改 ...
- 如何判断页面是qq浏览器还是微信浏览器打开
// 判断是QQ浏览器还是微信浏览器的js代码isWx = function() { var ua = navigator.userAgent.toLowerCase(); return ua.mat ...
- PHP JS判断浏览器，微信浏览器
微信内置浏览器的 User Agent 如何判断微信内置浏览器,首先需要获取微信内置浏览器的User Agent,经过在 iPhone 上微信的浏览器的检测,它的 User Agent 是: Mo ...
- 通过js区分移动端浏览器（微信浏览器、QQ浏览器、QQ内置浏览器）
由于公司业务中涉及到一个分享指引功能,而像微信.QQ内置浏览器需要引导用户点击右上角进行操作,其他浏览器则引导点击浏览器下方进行操作,因此需要区分浏览器类型: 通过在页面alert(navigator ...
- 【微信开发】JS和PHP分别判断当前浏览器是否微信浏览器
1.PHP端 //判断是否微信浏览器 -xzz1125 function is_weixin() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMes ...
- 判断手机浏览器还是微信浏览器(PHP)
//判断是否 微信浏览器 function isWeixin1() { if (strpos($_SERVER['HTTP_USER_AGENT'], 'MicroMessenger') !== fa ...
- 解决手机浏览器和微信中select中border:none;无用和去掉小三角
设置select的边框为none:在PC端是没有问题的,但是放到手机浏览器和微信里上还是会出现边框 解决办法: appearance:none; -moz-appearance:none; /* Fi ...
- C#判断用户是否使用微信浏览器，并据此来显示真实内容或二维码
平时我们看一些网页的时候会发现这样的功能:有的页面只能在微信里访问,如果在电脑上访问就只显示当前地址的二维码.这个用C#怎么实现呢?我们结合代码来看看. 首先,我们需要先判断用户使用的是什么浏览器,这 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
随机推荐
- windows CMD下的命令
1. dir 列出当前目录的内容 2. 切换目录 C:\Users\shuyun>e: ## 切换主目录 E:\>cd DataCenter ## cd 切换子目录 E:\DataCe ...
- BZOJ1303 [CQOI2009]中位数图
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...
- Automated Memory Analysis
catalogue . 静态分析.动态分析.内存镜像分析对比 . Memory Analysis Approach . volatility: An advanced memory forensics ...
- broadcasting Theano vs. Numpy
broadcasting Theano vs. Numpy broadcast mechanism allows a scalar may be added to a matrix, a vector ...
- 命名空间jquery
命名空间的意思就是 同一个元素有绑定了2个相同的事件,比如2个scroll,这个时候你做其他交互的时候只想触发第二个scroll事件 就可以用命名空间做了 <button id="b ...
- nginx-1.8.0 rpm包制作
1.安装rpm-build # yum install rpm-build 2.创建制作RPM包目录 # cat /root/.rpmmacros %_topdir /root/rpmbuild %_ ...
- vs2015 生成项目时，提示执行失败，参数错误
今天vs2015 生成项目时,提示执行失败,参数错误.查了很多资料未解决 后来,发现只有一个项目出现这个问题,其他项目生成正常.怀疑是该项目解决方案的问题 于是将解决项目中的项目移除,逐一生成引用,解 ...
- 第五章 --- 关于Javascript 设计模式 之 发布-订阅模式
先来个最简单的 发布订阅模式 document.body.addEventListener('click',function(){ alert(123); }); document.body.clic ...
- 《JavaScript高级程序设计（第3版）》笔记-序
很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...
- HDU1020字符串操作
#include <stdio.h> #include <string.h> int N; int size; void main() { scanf("%d&quo ...