[webkit移動開發筆記]之如何去除android上a標籤產生的邊框（轉）

轉載地址：http://www.cnblogs.com/PeunZhang/archive/2013/02/28/2907708.html

去年年末，作完最後一個項目就能夠開開心心回家，但是在測試階段，發現了很多bug，爲了避免影響回家時間，加班加點也要解決這些問題，這裏算是工做回憶，也算是工做的一點小總結。

在ios4+和android2+系統，當手指觸摸屏幕a標籤連接或按鈕時，會產生不一樣的效果，對於ios點擊元素的時候，就會出現一個半透明的灰色背景；對於android則出現紅色的邊框。對這2個系統自帶的效果，這種體驗的意義無非爲了告知用戶按鈕已經點擊到，帶來的價值是好的。惋惜帶來了體驗的同時，也帶來了bug......

主要是在android手機的一個bug

使用css給模塊設置了opacity:0，控制該模塊隱藏，若是該模塊包含a標籤，其a標籤在android手機是能夠被觸發的，而在iphone是不能夠觸發。

下圖左圖爲模塊一，當頁面內容未加載完成時，顯示該模塊；右圖爲模塊二，當頁面內容徹底加載成功後才顯示該模塊，模塊二經過設置了徹底透明使其隱藏在模塊一的上一層級。

 

在android手機中，當處於模塊一狀態時，用戶觸摸到「查看按鈕」，a標籤的邊框顯示出來，這明顯不是咱們要想要的體驗。

最後跟產品經理溝通後，針對android手機去除上圖的按鈕邊框，那麼如何去除android手機自帶的按鈕邊框呢？

在搜索引擎中找到資料-webkit-tap-highlight-color能夠去除邊框，以下圖：

排除誤解

網絡資料說這個屬性只用於iOS(iPhone和iPad)，實際上是錯誤的，android手機大部分也是支持的，只是顯示效果不同，移動開發並不成熟，更多的還須要你們去實踐來辨別真僞- -

-webkit-tap-highlight-color用法

webkit內核的瀏覽器，當用戶點擊一個連接或者經過js定義的可點擊元素的時候，會出現一個半透明的灰色背景或者紅色的邊框。

若是想要禁用高亮，可設置顏色的alpha值爲0，也就是屬性值的最後一位設置爲0就能夠去除背景或者邊框。

去除android連接觸摸時產生邊框的css代碼

a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}/* 1.去除android a/button/input標籤被點擊時產生的邊框 2.去除ios a標籤被點擊時產生的半透明灰色背景 */

ok~搞定

通常咱們設置：

* { -webkit-tap-highlight-color: rgba(0,0,0,0); /* 1.去除android a/button/input標籤被點擊時產生的邊框 2.去除ios a標籤被點擊時產生的半透明灰色背景 */ }