【解決】Android 2.x 不支援overflow、position:fixed解決方案

Android 2.x和IOS5以下都不支援overflow:auto屬性（position:fixed也不支援）。
移動端瀏覽器安全色性和PC端相比，有過之而無不及。作業系統版本及各式瀏覽器和各式的螢幕大小排列組合，你永遠也無法預測到你的應用會在哪部手機上冒出什麼樣的問題。
測試過各種瀏覽器（chrome手機瀏覽器、百度手機瀏覽器、手機QQ瀏覽器、UC瀏覽器、UC瀏覽器HD、safari瀏覽器、firfox手機瀏覽器、WinPhone系統上的各瀏覽器，終端包括手機、ipad及PC android模擬器、PC IOS模擬器）

其中有幾個比較明顯的問題：
1、一些手機對position:fixed支援不完善（跟著手勢滾動後再彈回到固定位置，懷疑是否手機或是瀏覽器效能問題，渲染速度跟不上導致這種“卡”的效果）
2、一些手機或瀏覽器對overflow:auto支援不完善，在小米內建的瀏覽器中，對固定高度的容器設定overflow:auto後，容器內容超過容器高度後，直接被隱藏，無論怎麼拖動都無法顯示。特別是iframe中的overflow情況更為複雜。
3、WinPhone更為恐怖，顯示效果和IE7差不多了，不支援CSS3的gradient,線性背景直接顯示灰白色。
由此可見，要做到相容各系統版本，各瀏覽器，各螢幕大小也著實不易。
4、基本都支援min-height屬性

對於某些手機不支援overflow:auto情況，最佳解決方案就是：不去用overflow:auto屬性，即不要去設定一個固定的高度。後續會講到其它解決方案。


話說是在做APP的點擊題號跳轉功能時出現的這個問題，預想中的功能是這樣的：點擊題號列表按鈕，彈出全屏題號列表(position:fixed;top:20px /*空出APP的header*/;bottom:0px;overflow;auto;）,當題目很多時，就可以滑動顯示題號點擊跳轉。測試時小米內建瀏覽器根本無法滑動，三星中的瀏覽器可以滑動部分，但顯示不全。

調試方案一
於是想，既然Android和IOS高版本支援overflow屬性，那就寫個相容的方法：

1	.box{position:absolute;top:20px /*空出APP的header*/;min-height:500px /*box需遮住整個頁面*/;}

2	@media all and (-webkit-transform-3d){/* Android4.0下不識別該-webkit-transform-3d，使用它可做Android4.0下版本相容 */

3	.box{position:fixed;top:20px;bottom:0px;overflow;auto;min-height:0px;}

4

}

[註：hack來源及分析請參考： 【原】webapp開發中相容Android4.0以下版本的css hack  ]
但測試效果卻並不盡如人意，在Android4.x的QQ瀏覽器中，根本未識別這個hack，百度瀏覽器中成功識別，但滑動後題號還是顯示不全，chrome瀏覽器相對支援較好。

調試方案二（1）
經過尋找，德問上也有人提出這個問題，根據參考答案測試了一下

安卓2.3系統webview不支援網頁的div捲軸，各位有解決方案麼

android2.3的不支援捲軸，並且scrollTop也不支援的。（設定overflow未hidden就可以支援）。
給你個方法保准OK，望採納：

01