問題:
在進行頁面開發時,經常會使用:before, :after偽元素創建一些小tips,但是在:before或:after的content屬性使用中文的話,會導致某些瀏覽器上出現亂碼。
例如我遇到一個分頁的問題:
正常時這樣的:
有時候會出現亂碼變成這樣子:
解決方案:
- 確保HTML、CSS文件使用UTF-8格式,並且HTML文檔也使用UFT-8的字符編碼格式,即HTML文檔的meta信息包含 <meta charset="UTF-8"> 。
- 避免在CSS的:before, :after中使用中文,如果一定要使用,可以使用中文對應的Unicode。可以使用使用站長工具(http://tool.chinaz.com/tools/unicode.aspx)的Unicode編碼轉換,或者是JavaScript的原生方法escape將中文轉為Unicode。需要注意的是Unicode在CSS中的書寫方式,例如“限量搶”對應的Unicode是'\u9650\u91cf\u62a2',而在CSS中要寫成 span:before { content: '\9650\91cf\62a2' } 。