您的位置:首页 > 移动开发 > Android开发

css在ios和android设备上的兼容性问题(移动设备不同内核浏览器样式兼容性)笔记

sunshineGirl_77 2016-11-09 13:39 85 查看
position属性带来的浮动问题:

项目案例:

网宿流量微信公众号活动红包抽奖页面;

问题描述:

在input被获取焦点时,屏幕上position属性值为absolute的元素,包含input,会被弹出的虚拟键盘顶起,导致显示样式异常

设备:

Android设备存在此问题,而iOS设备显示正常

原因分析:

css属性中对容器的样式中提到,子元素定位方式为absolute或者fixed,若父容器没有添加属性position:relative;则当前元素的定位坐标是相对于body元素的(大部分情况下也可描述为当前窗口可见范围)。问提的出现是android的虚拟键盘显示机制,占用了一部分的屏幕资源,是的分配给浏览器的屏幕资源高度缩小,position为absolute和fixed的元素在父容器没有定义position:relative的情况下,因为浏览器窗体可见范围的缩小,定位响应发生改变,所以出现“被顶起”的情况。

解决方案:

在分析中提到,父级容器与子元素的关系,所以在父级容器中定义容器高度,并设定position属性的值为relative即可解决此问题。
相关文章推荐