ios系統的css兼容問題處理和iOS上網頁滑動不流暢問題

1.H5網頁touch滑動的時候在蘋果手機上出現不流暢的問題

-webkit-overflow-scrolling 用來控制元素在移動設備上是否使用滾動回彈效果.

解決辦法：給所有網頁添加如下樣式

body { overflow:auto; /* 用於 android4+，或其他設備 */ -webkit-overflow-scrolling:touch; /* 用於 ios5+ */ } 

說明：
-webkit-overflow-scrolling: touch; 當手指從觸摸屏上移開，會保持一段時間的滾動
-webkit-overflow-scrolling: auto; 當手指從觸摸屏上移開，滾動會立即停止

2. css 蘋果手機按鈕默認樣式如何去掉

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea {  -webkit-appearance: none;}   

3. 如果還有圓角的問題，

.button{ border-radius: 0; } 

 4.蘋果手機不支持box-shadow屬性

如果先給input寫邊框，用 border:1px solid #ccc;

5、去除Chrome等瀏覽器文本框默認發光邊框

input:focus, textarea:focus {outline: none;}

6.去掉高光樣式：

input:focus{-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;}

當然這樣以來，當文本框載入焦點時，所有瀏覽器下的文本框的邊框都不會有顏色上及樣式上的變化了，這樣的話，當文本框載入焦點時，邊框顏色就會變為橙色，給用戶一個反饋。

7、去除IE10+瀏覽器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display: none;}

8.H5頁面寫出來，在chrome中出現如下錯誤，只需添加如下css即可解決

.

*{touch-action: pan-y;}