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

position 属性带来的浮动问题：

项目案例：

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

问题描述：

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

设备：

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

原因分析：

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

解决方案：

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