css的position在不同手机系统的兼容问题(点击input标签弹出输入框影响样式)
来源:互联网 发布:如何使用广电网络电视 编辑:程序博客网 时间:2024/06/04 18:30
问题描述:
在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常
设备:
安卓设备存在此问题,而ios设备显示正常
原因分析:
css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于body元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。
解决方案:
在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
阅读全文
0 0
- css的position在不同手机系统的兼容问题(点击input标签弹出输入框影响样式)
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
- CSS在不同浏览器上的兼容问题
- CSS在不同浏览器上的兼容问题
- div+css在不同浏览器的兼容问题
- 手机端css中input的高度兼容问题
- 为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。 当然,初始化样式会对 SEO 有一定的影响,但鱼
- 手机调用系统的拍照和裁剪功能,如果界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
- input框 placeholder变色,及去掉苹果手机默认input样式,css去除点击阴影
- 如何去除input标签点击之后出现的默认样式
- ios系统针对底部input设置fixed的输入框不兼容问题
- css的position-relative兼容问题与解决办法
- 点击input输入框弹出选择层
- css中图片路径,以及在不同浏览器的兼容问题
- html\css\js-dom在不同主流浏览器的兼容问题
- value在input标签不同情况有不同的用法
- 手机点击输入框,弹出输入法会盖住web的文本框问题。
- 多线程(二)
- Oracle中Cursor介绍和使用
- split 分割 字符串(分隔符如:* ^ : | , .) 及注意点
- 腾讯2017暑期实习生编程题:构造回文 [python]
- Intel® Xeon® Scalable Processors(前称 Skylake-SP)技术概观
- css的position在不同手机系统的兼容问题(点击input标签弹出输入框影响样式)
- 将文字画在给定的文本框正中间
- java使用jedis连接redis
- 矩阵求导常用公式
- C#删除字符串最后一个字符的几种方法
- 【MyBatis】mybatis工作流程(三)
- Oracle中Cursor使用
- 解决vue-cli项目无法用本机IP访问的问题
- Go 语言8岁了