偽元素:before和:after失效

現象

部分安卓機中base64背景圖片無法顯示

問題分析

• 機型 HUAWEI P6

• 系統 android 4.2.2

對比線上其它網站能正常的顯示的代碼，自己的代碼

[class^="icon-"]:before{font-family: 'run';... }

發現如下不同

[class^="icon-"] {display: inline-block; // 關鍵代碼... } [class^="icon-"]:before{font-family: 'run';... }

解決方案

經過分析，包裹偽元素:before或:after的元素必須是塊狀

部分安卓機不顯示@font-face字體

現象

部分安卓機不顯示@font-face字體

問題分析

• 機型 HUAWEI P6

• 系統 android 4.2.2

對比線上其它網站能正常的顯示的代碼沒有找到問題。
于是通過對比刪除干擾代碼的辦法，一層層抽絲剝繭，定位到如下那么一段代碼引發的問題

body, input, textarea, select, button {// http://usabilitypost.com/2012/11/15/w-optimizelegibility-on-mobile-devices/text-rendering: optimizeLegibility; }

天下樣式一大抄，卻不知其所以然，最早借鑒了很多開源庫的重置樣式
盤查了一整晚font-face失效的問題，原來是它導致的，走多夜路終于嘗到苦果。

解決方案

刪除雞肋

總結

以上是生活随笔為你收集整理的项目bug整理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。