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就能搞定了。