去年年底，做完最后一個項目就可以開開心心回家，可是在測試階段，發(fā)現(xiàn)了不少bug，為了不影響回家時間，加班加點也要解決這些問題，這里算是工作回憶，也算是工作的一點小總結(jié)。

在ios4+和android2+系統(tǒng)，當(dāng)手指觸摸屏幕a標(biāo)簽鏈接或按鈕時，會產(chǎn)生不同的效果，對于ios點擊元素的時候，就會出現(xiàn)一個半透明的灰色背景；對于android則出現(xiàn)紅色的邊框。對這2個系統(tǒng)自帶的效果，這種體驗的意義無非為了告知用戶按鈕已經(jīng)點擊到，帶來的價值是好的。可惜帶來了體驗的同時，也帶來了bug......

主要是在android手機(jī)的一個bug

使用css給模塊設(shè)置了opacity:0，控制該模塊隱藏，如果該模塊包含a標(biāo)簽，其a標(biāo)簽在android手機(jī)是可以被觸發(fā)的，而在iphone是不可以觸發(fā)。

下圖左圖為模塊一，當(dāng)頁面內(nèi)容未加載完成時，顯示該模塊；右圖為模塊二，當(dāng)頁面內(nèi)容完全加載成功后才顯示該模塊，模塊二通過設(shè)置了完全透明使其隱藏在模塊一的上一層級。

?

在android手機(jī)中，當(dāng)處于模塊一狀態(tài)時，用戶觸摸到“查看按鈕”，a標(biāo)簽的邊框顯示出來，這明顯不是我們要想要的體驗。

最后跟產(chǎn)品經(jīng)理溝通后，針對android手機(jī)去除上圖的按鈕邊框，那么如何去除android手機(jī)自帶的按鈕邊框呢？

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

排除誤解

網(wǎng)絡(luò)資料說這個屬性只用于iOS(iPhone和iPad)，其實是錯誤的，android手機(jī)大部分也是支持的，只是顯示效果不一樣，移動開發(fā)并不成熟，更多的還需要大家去實踐來辨別真?zhèn)? -

-webkit-tap-highlight-color用法

webkit內(nèi)核的瀏覽器，當(dāng)用戶點擊一個鏈接或者通過js定義的可點擊元素的時候，會出現(xiàn)一個半透明的灰色背景或者紅色的邊框。

如果想要禁用高亮，可設(shè)置顏色的alpha值為0，也就是屬性值的最后一位設(shè)置為0就可以去除背景或者邊框。

去除android鏈接觸摸時產(chǎn)生邊框的css代碼

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

ok~搞定

總結(jié)

以上是生活随笔為你收集整理的【原】[webkit移动开发笔记]之如何去除android上a标签产生的边框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。