关于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浏览器上遇到的坑的更多相关文章

  1. 前端开发在手机UC浏览器上遇到的坑

    1.user-scalable问题 写手机页面都会加一个meta标签 <meta content="width=device-width, initial-scale=1.0, max ...

  2. web前端开发中的浏览器兼容性总结

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  3. 在UC浏览器上很炫的一个效果

    效果简述: 这个效果将会强行去除UC浏览器的网址输入框和底部的菜单栏,这样网页将会占据整个手机界面.感觉看起来很像是一个APP. 浏览器界面右下角将会出现一个向上的标志,用来唤出简单的菜单栏. (界面 ...

  4. 前端开发JavaScript清除浏览器缓存的方法

    查看和删除浏览器缓存的方法=====>打开 最近在开发项目中发现有时候总要频繁地清除浏览器缓存,不然总是显示的过时的信息 浏览器缓存有利有弊,有些数据需要缓存下来使得页面打开更快提高网站性能,但 ...

  5. 前端开发,走浏览器缓存真的很烦,拒绝浏览器走缓存从meta标签做起!

    <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv ...

  6. 92.vue---新手从本地项目开发到服务器线上运行爬坑。

    因为我做的是后台,所以不用做SEO 参考 本项目的定位是后台集成方案,不太适合当基础模板来进行二次开发.因为本项目集成了很多你可能用不到的功能,会造成不少的代码冗余.如果你的项目不关注这方面的问题,也 ...

  7. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  8. 【收藏】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

  9. 【分享】Web前端开发第三方插件大全

    收集整理了一些Web前端开发比较成熟的第三方插件,分享给大家. ******************************************************************** ...

随机推荐

  1. simlescalar CPU模拟器源代码分析

    Sim-outorder.c Main性能 Fetch  -->  despetch-->                                issue-->       ...

  2. windows 系统本地做mysql 主从同步,最后面解决主从同步库名不一致,表结构一致

    原文:windows 系统本地做mysql 主从同步,最后面解决主从同步库名不一致,表结构一致 mysql主从同步的好处以及原理       之前看到很多新闻说某某的服务器奔溃,磁盘碎了,导致数据丢失 ...

  3. win10 uwp 线程池

    原文:win10 uwp 线程池 如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何在 UWP 使用线程池,本文 ...

  4. Struts2——(3)ValueStack(值栈)

    一.ValueStack 主要用于存储请求相关信息,内部结构如下 root区:被称为根存储区,是一个栈结构,栈顶元素为当前请求的Action对象. context区:被称为变量存储区,是一个Map结构 ...

  5. [Spring Boot 系列] 集成maven和Spring boot的profile 专题

    maven中配置profile节点: <project> .... <profiles> <profile> <!-- 生产环境 --> <id& ...

  6. mongoDB 入门手册

    MongoDB - 简介 官网:https://www.mongodb.com/ MongoDB 是一个基于分布式文件存储的数据库,由 C++ 语言编写,旨在为 WEB 应用提供可扩展的高性能数据存储 ...

  7. [科普]MinGW vs MinGW-W64及其它(比较有意思,来自mingw吧)

    部分参照备忘录原文: bitbucket.org/FrankHB/yslib/src/50c3e6344a5a24b2382ce3398065f2197c2bd57e/doc/Workflow.Ann ...

  8. WPF中ListBox滚动时的缓动效果

    原文:WPF中ListBox滚动时的缓动效果 上周工作中遇到的问题: 常规的ListBox在滚动时总是一格格的移动,感觉上很生硬. 所以想要实现类似Flash中的那种缓动的效果,使ListBox滚动时 ...

  9. WPF无边框实现拖动效果

    这是在做弹幕的时候遇到的一个需求 透明背景,拖动弹幕=.= private void Window_MouseLeftButtonDown(object sender, MouseButtonEven ...

  10. WPF Path和图形

    <Window x:Class="GeometryDemo.MainWindow" xmlns="http://schemas.microsoft.com/winf ...