解决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 ...
随机推荐
- bzoj4443[SCOI2015]小凸玩矩阵
题意:一个n*m的矩阵(n<=m<=250),要求选出n个数(每行,每列最多选一个),求第k大数的最小值. 首先第k大的意思是从大到小的第k个数(我读错了,WA了一次还以为算法不对...) ...
- [虚拟机]Virtual Box的使用--共享文件夹
最近为系统测试使用了虚拟机,VM太卡,所以使用了VBox,运行效果还不错 为了主机和客户机之前方便进行数据传输,一般采用文件夹共享的方式(当然,可以直接拖拽) 1,直接拖拽,需要做如下设置 主要的是“ ...
- react native 环境配置
1. 安装Homebrew Homebrew主要用于安装后面需要安装的watchman.flow 打开MAC的终端,输入如下命令: ruby -e "$(curl -fsSL https:/ ...
- web应用中浏览器与服务端的编码和解码
转自:http://blog.sina.com.cn/s/blog_87cb63e50102w2b6.html 以下为正文: ************************************* ...
- win7系统的右键菜单只显示一个白色框不显示菜单项 解决办法
如上图所示,桌面或其他大部分地方点击右键菜单,都只显示一个白色框,鼠标移上去才有菜单项看,并且效果很丑 解决办法: 计算机-右键-属性-高级-性能-设置-视觉效果-淡入淡出或滑动菜单到视图,将其前面的 ...
- ADO.NET--收藏整理别人的教程
本文所有内容均从前辈的博客中收集整理而来,仅供自己学习参考的时候快速访问用. ADO.NET入门教程(一) 初识ADO.NET ADO.NET入门教程(二)了解.NET数据提供程序 ADO.NET入门 ...
- Nginx 和 IIS 实现动静分离
前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...
- ThinkPHP的URL访问
url访问 http://www.kancloud.cn/manual/thinkphp5/118012 ThinkPHP5.0在没有启用路由的情况下典型的URL访问规则是: http://serve ...
- AssetBundle
AssetBundle是Unity推荐的一种资源打包方式,与不使用AssetBundle相比,它有如下优点: 1.AssetBundle是经过LZMA压缩过的,所以体积更小. 2.可以将AssetBu ...
- REDHAT一总复习1 NTP更改时区,并验证时区设置是否正确
把计算机时区调整到巴哈马(这是个啥地方?听都没听过.) 使用 tzselect 进行确定时区,并进行可对话性的设置,按照对应的序号,射进去就行了. 使用:timedatectl set-timezo ...