話說現在的手機型号越來越多，主要還是android和ios這2個巨頭稱霸了江湖，而他們自帶的浏覽器核心是webkit，那對于做移動網頁開發的同僚來說，一般隻要做好webkit核心浏覽器的展現效果就行了，看起來很簡單，其實背後還有一個大坑等着你。
大家在注釋中可以看到，ios被點選時産生的半透明灰色背景會被這個屬性也清除掉，沒有了效果，使用者體驗一般，這個時候我們要保留android4+的邊框和ios系統的半透明灰色背景顯示正常，那麼我們标題中的問題來啦，如何讓頁面隻相容android4.0以下版本的系統，無需js也可以做到，有木有！！！
在css3的相容中，相信大家對使用media的相容并不陌生，我之前也提到過很多次，那麼今天使用的hack也是跟它離不開的，代碼如下：
這裡利用-webkit-transform-3d屬性，因為android4.0下不識别該選擇器，浏覽器解析代碼時，會直接跳過此步驟，那麼我們簡單寫下代碼，就是做好對android4.0以下版本的相容啦！
測試代碼：
android4.0+和ios浏覽器中效果圖：
android4.0以下浏覽器中效果圖：
ok，本篇文章結束，感謝公司某同僚提供的相容辦法，寫出來共享，希望好的東西能夠幫助到更多的朋友，解決大家的困擾~
作者：白樹