tab欄切換遇到的bug

當我們使用tab欄進行切換的時候，會出現(xiàn)一個背景色，起初我以為是CSS偽類事件:active所產(chǎn)生的，但是經(jīng)過測試并非是這樣的情況。在手機上(安卓手機和蘋果手機)進行測試，發(fā)現(xiàn)安卓會出現(xiàn)這樣的情況，而蘋果手機不會出現(xiàn)這樣的情況。看看問題圖片：

當點擊以后出現(xiàn)這樣的情況：

CSS 樣式代碼：

ul li{width: 100%;list-style: none;text-align: center;justify-content: space-between;float: left;font-size: 0.3em;color: #666;/* 出現(xiàn)該bug的罪魁禍首 cursor */cursor: pointer;padding-top: 8px; }ul li:active {color: #75b5d1;background-color: #ddecff !important; }

經(jīng)過分析和調(diào)試發(fā)現(xiàn)，蘋果系統(tǒng)是不支持cursor: pointer;這個樣式的，所以點擊切換的時候不會出現(xiàn)上述圖片的情況，安卓則會出現(xiàn)，因為想到該項目可能會存在瀏覽器中進行預(yù)覽，為了美觀一點所以我添加了這個cursor: pointer;樣式，最后把這個刪除了，就不會出現(xiàn)這樣的情況了。希望大家在解決問題的時候不要向我這樣存在畫蛇添足的情況！還是不要太根據(jù)自己的想想去寫代碼，不然自己就是一個BUG制造機了…

總結(jié)

以上是生活随笔為你收集整理的手机端点击＜li＞标签出现背景色的问题和解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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