前端开发在uc浏览器上遇到的坑
关于uc 的flex 和textarea 的width:100%;
这些天再做一个wap的项目,本想着手机上不用考虑兼容性问题,可以大刀阔斧搞,fuck ie678!
在pc上完成页面开发,在chrome模拟器上做页面的矫,good!一切看起来都是很美好的样子~~
打开手机测试页面,想想都有点小激动呢!扫码,。。。。。。。。。。卧槽,啥浏览器这是!卧槽,这是uc吗!
尼玛,居然我的一个最简单页面都不能正常显示,毕竟只是只有两个textarea的页面啊,我擦,这都能出错!??@@...
检查了代码,测试了其他浏览器只有uc是这样,textarea宽度设置width:100%;并不能全屏。console了body和textarea的宽度,分别是360 和348。后来发现居然有uc开发版,可以pc调控手机,大喜过望,然并卵。。。并没有发现多余的padding和margin,而且除了textarea别的标签都可以100%。
测试连接:http://jielan.sinaapp.com/4.html
项目逼近,必须得把这个丑陋的输入框改掉啊!
除了设置宽度100%还有别的方法么,卧槽,对了,display:flex;后来我给textarea找了个父元素宽度100%,textarea就flex:1;忐忑中再次扫码,凑!好样的,就是我要的100%!
好哒,解决了剩下的那一个,如法炮制就ok了,哈哈,真是佩服自己的机智。加父元素,复制css,ctrl+s,扫码。
卧槽,傻了,尼玛怎么都是一半的宽度。

( ⊙ o ⊙ )是的!就酱紫,项目逼近啊。。。肿么办!!!只有特么的uc!!!fuck uc!!!╮(╯▽╰)╭,还得解决问题啊,试了很多属性都不行。最后删除复制错了,尼玛居然ok了。
父元素去掉display:flex;子元素都是flex:1.宽度100%;就这样uc就是全屏了。

别问我为什么,可能这就是爱吧。。。爱是解释不清楚的。。。
另外,如果你的flex元素是input你需要给它指定display:block才能让它去自适应宽度。还有inpu要写明高度height,不然你一输入就是高度变低,然后在恢复回去,真是奇葩哦。。。。。。
别问为什么,可能真的就是uc的爱
前端开发在uc浏览器上遇到的坑的更多相关文章
- 前端开发在手机UC浏览器上遇到的坑
1.user-scalable问题 写手机页面都会加一个meta标签 <meta content="width=device-width, initial-scale=1.0, max ...
- web前端开发中的浏览器兼容性总结
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...
- 在UC浏览器上很炫的一个效果
效果简述: 这个效果将会强行去除UC浏览器的网址输入框和底部的菜单栏,这样网页将会占据整个手机界面.感觉看起来很像是一个APP. 浏览器界面右下角将会出现一个向上的标志,用来唤出简单的菜单栏. (界面 ...
- 前端开发JavaScript清除浏览器缓存的方法
查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但 ...
- 前端开发,走浏览器缓存真的很烦,拒绝浏览器走缓存从meta标签做起!
<meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv ...
- 92.vue---新手从本地项目开发到服务器线上运行爬坑。
因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...
- 解决UC浏览器或微信浏览器上flex兼容问题
在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...
- 【收藏】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
- 【分享】Web前端开发第三方插件大全
收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...
随机推荐
- 【PHP Manager for IIS】让IIS支持PHP
本文安装环境: 操作系统:Win7 64位 PHP版本:PHP 5.5.15(VC11 x64 Thread Safe) 下载地址:http://windows.php.net/download ...
- MySQL旧版本ORDER BY 方法
MySQL 的order by 它涉及到三个参数:A. sort_buffer_size 排序缓存.B. read_rnd_buffer_size 第二次排序缓存.C. max_length_for_ ...
- 发布与订阅SQLServer
SQLServer 中发布与订阅 在对数据库做迁移的时候,会有很多方法,用存储过程,job,也可以用开源工具lettle,那么今天这些天变接触到了一种新的方法,就是SqlServer中自带的发布与订阅 ...
- [ACM] POJ 2689 Prime Distance (筛选范围大素数)
Prime Distance Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12811 Accepted: 3420 D ...
- wpf控件开发基础(4) -属性系统(3)
原文:wpf控件开发基础(4) -属性系统(3) 知识回顾 接上篇,上篇我们真正接触到了依赖属性的用法,以及依赖属性的属性元数据的用法,并且也实实在在地解决了之前第二篇提到的一系列问题.来回顾一下 属 ...
- 北大SQL数据库视频课程笔记
Jim Gray - Transaction processing: concepts and techniqueshttp://research.microsoft.com/~gray/ 事务概念 ...
- Qt、Qte与Qtopia(Qt嵌入式的发展历程)
Qt的授权是分为两条线,商业版和开源版.如果使用商业版的Qt,那么开发出的程序可以是私有的和商业的:如果使用的是开源版的Qt,由于其使用的是GPL协议,那么可发出的程序也必须是GPL的.不过自从qt ...
- MIPS之路在何方?
目前市场上还有谁想要MIPS?MIPS接下来将何去何从?如果有一家公司希望能好好地经营MIPS,应该用什么策略呢? MIPS仍然有营收来源.它还拥有ARM所没有的多执行绪技术.有人说,只要想到半导 ...
- 方阵的迹(trace)及其微分(导数)
trace 的一个十分重要的性质在于线性性, Tr(A+B)=Tr(A)+Tr(B)Tr(cA)=cTr(A) 1. 基本性质 Tr(A)=Tr(AT) Tr(AB)=Tr(BA) Tr(ABC)=T ...
- 微信小程序之加载更多(分页加载)实例
业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接 ...