ios兼容性收集整理

1. ios系统兼input输入框光标问题

异常现象：苹果手机文本输入框样式异常——光标聚焦到文本框，光标高度充满文本框，输入内容，光标高度为文本框上边框到输入内容底部：

光标聚焦：

输入内容：

异常缘由：使用line-height样式致使，在ios系统中渲染跟安卓手机不一致。

解决方法：input输入框改用padding控制文本框高度（如不考虑ios光标问题，继续用line-height也无妨，毕竟使用padding控制文本框高度仍是有一点点麻烦的）。

2. ios脱离文档流问题：

 

异常现象：下拉页面，出现部分层随着下拉往下滑动，部分层保持不动，形成排版混乱；

解决方法：对于页面顶部展现的元素，能够使用绝对定位 position: absolute; ，不要使用固定定位 position: fixed; 。对于处于屏幕底部展现的一些须要固定位置的元素则能够使用固定定位fixed。

详见：ios系统微信浏览器、safari浏览器中h5页面上拉下滑致使悬浮层脱离窗口的解决方法。

3. 文本框展现不正常：

 

解决方法——设置行高便可：

line-height: .9rem;

4.p元素行高未生效：

安卓手机正常，苹果手机行高失效：

正常展现：

 

异常缘由：p标签没有设置高度，设置高度就行了

注：ios环境下height、line-height好像都要同时设置，缺一不可，不像安卓手机，使用line-height就能搞定了。