css的position在不同手机系统的兼容问题(点击input标签弹出输入框影响样式)
2017-11-22 15:17
781 查看
问题描述:
在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常
设备:
安卓设备存在此问题,而ios设备显示正常
原因分析:
css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于bod
a949
y元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。
解决方案:
在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常
设备:
安卓设备存在此问题,而ios设备显示正常
原因分析:
css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于bod
a949
y元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。
解决方案:
在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
相关文章推荐
- 为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。 当然,初始化样式会对 SEO 有一定的影响,但鱼
- 解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
- 不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入
- 手机调用系统的拍照和裁剪功能,如果界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
- ios系统针对底部input设置fixed的输入框不兼容问题
- 手机点击输入框,弹出输入法会盖住web的文本框问题。
- 苹果手机点击输入框input 页面放大 超出屏幕问题
- 不同浏览器兼容问题—— input 添加required属性 firefox下输入框为红色 +禁止中文输入
- 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
- 手机调用系统的拍照和裁剪功能,假设界面有输入框EditText,在一些手机会出现点击EditText会弹出输入法,却不能输入的情况。
- Android WebView加载带有Input的输入框时点击无法弹出软键盘的问题解决
- 怎么让input里的text和button使用不同的css样式
- 根据不同浏览器调用不同css解决兼容问题
- 网页设计中input标签写CSS时需要注意的几个问题
- 利用IE/FF的不同识别CSS来使用浏览器兼容问题
- 基本让input 按钮 和 a标签按钮在不同浏览器统一样式
- css控制input不同类型的不同样式
- Css--input输入框点击时去掉外框outline:medium;(chrome)
- 有关css和js针对不同浏览器兼容的问题
- 控制input的CSS但不影响CheckBox以及Radio的样式