解决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 ...
随机推荐
- eclipse中启动调试maven构建的javaweb项目
RT,遇到这个问题,我的第一反应就是找教程,今天折腾了一天,书也看了,博客也看了,maven视频都看了,有种做不出来的感觉了,带着前几个小时看的相关的资料和经验,就自己去摸索了. 直接开始说我是怎么做 ...
- ubuntu安全卸载移动硬盘(safely remove)
移动磁盘不能安全卸载.在网上找到的资料如下: sudo apt-get install udisks sudo umount /dev/sdb1 sudo udisksctl power-off -b ...
- 数据结构作业——Sanji（优先队列）
山治的婚约 Description 我们知道,山治原来是地下有名的杀人家族文斯莫克家族的三子,目前山治的弟弟已经出现,叫做四治,大哥二哥就叫汪(One)治跟突(Two)治好了(跟本剧情无关) .山治知 ...
- 关于ACM的总结
看了不少大神的退役帖,今天终于要本弱装一波逼祭奠一下我关于ACM的回忆. 从大二上开始接触到大三下结束,接近两年的时间,对于大神们来说两年的确算不上时间,然而对于本弱来说就是大学的一半时光.大一的懵懂 ...
- HDU 4081Qin Shi Huang's National Road System（次小生成树）
题目大意: 有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点.秦始皇希望这所有n-1条路长度之和最短.然后徐福突然有冒出来,说是他有魔法,可以不用人力.财力就变 ...
- Hibernate（Control）
案例:http://blog.csdn.net/jiuqiyuliang/article/details/39380465 对象关系映射框架,它对JDBC进行了轻量级的对象封装,可以使用对象编程思维来 ...
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- 使用vlc进行二次开发做自己的播放器
可参考: 使用vlc播放器做rtsp服务器 使用vlc播放器播放rtsp视频 web网页中使用vlc插件播放相机rtsp流视频 使用 https://github.com/ZeBobo5/Vlc.Do ...
- 在QtCreator中使用doxygen
接触Doxygen后,认识到其强大之处,一口气将之前的烂代码重构了一遍,所有的文件头,函数注释等等都是手动添加注释.在keil中可以看到其对JavaDoc风格的注释有高亮,非常好看.但是keil这个I ...
- telnet模拟邮件发送
前提:Telnet命令可用 问题:提示不是内部命令: 解决办法:控制面板->程序和功能->打开或关闭Windows功能,把Telnet客户端勾上即可: 步骤: telnet smtp.al ...