css在ios和android设备上的兼容性问题（移动设备不同内核浏览器样式兼容性）笔记
position属性带来的浮动问题：项目案例：网宿流量微信公众号活动红包抽奖页面；问题描述：在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常设备：android设备存在此问题，而ios设备显示正常原因分析：css属性中对容器的样式中提到，子元素定位方式为absolute或者fix
·
position属性带来的浮动问题：
项目案例：
网宿流量微信公众号活动红包抽奖页面；
问题描述：
在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常
设备：
android设备存在此问题，而ios设备显示正常
原因分析：
css属性中对容器的样式中提到，子元素定位方式为absolute或者fixed，若父容器没有添加属性position:relative；则当前元素的定位坐标是相对于body元素的（大部分情况下也可描述为当前窗口可见范围）。问提的出现是android的虚拟键盘显示机制，占用了一部分的屏幕资源，是的分配给浏览器的屏幕资源高度缩小，position为absolute和fixed的元素在父容器没有定义position:relative的情况下，因为浏览器窗体可见范围的缩小，定位响应发生改变，所以出现“被顶起”的情况。
解决方案：
在分析中提到，父级容器与子元素的关系，所以在父级容器中定义容器高度，并设定position属性的值为relative即可解决此问题。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)