问题:

在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码。

例如我遇到一个分页的问题:

正常时这样的:

有时候会出现乱码变成这样子:

解决方案:

  1. 确保HTML、CSS文件使用UTF-8格式,并且HTML文档也使用UFT-8的字符编码格式,即HTML文档的meta信息包含 <meta charset="UTF-8"> 。
  2. 避免在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' }  。

  

解决——CSS :before、:after ,当content使用中文时有时候会出现乱码的更多相关文章

  1. PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码

    这 个问题的出现的前提是本站代码采用utf-8格式,php空间当页面停留在搜索页面时,在浏览器的地址栏输入中文的关键字进行搜索时会出现乱码,在网上查找资料说 明,是因为浏览器默认将url中的中文字符编 ...

  2. 解决backbone url请求中参数有中文,存入数据库是乱码

    最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台   model定义如下: var AddCourse= Backbone.Mo ...

  3. 怎么用一行代码解决CSS各种IE各种兼容问题

    用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...

  4. 解决springmvc使用ResponseBody注解返回json中文乱码问题

    spring版本:4.2.5.RELEASE 查看“org.springframework.http.converter.StringHttpMessageConverter”源码,中有一段说明: B ...

  5. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  6. 解决ubuntu中zip解压的中文乱码问题

    转自解决ubuntu中zip解压的中文乱码问题 在我的ubuntu12.10中,发现显示中文基本都是正常的,只有在解压windows传过来的zip文件时,才会出现乱码.所以,我用另一个方法解决中文乱码 ...

  7. 解决Ubuntu下sublime中不能输入中文的问题

    解决Ubuntu下sublime中不能输入中文的问题 Ubuntu下安装sublime后,不能输入中文,而在其他软件中能正常输入,这是sublime的bug,解决方案是在通过shell在每次运行sub ...

  8. 利用IIS部署WEB网站以及解决CSS/JS不能显示问题

    利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...

  9. php函数:解决数组转对象时数组内中文乱码问题

    function to_urlencode(&$arr){//解决数组转对象时数组内中文乱码问题 foreach($arr as $key => $value){ if(is_array ...

随机推荐

  1. BZOJ 3022 [Balkan2012]The Best Teams(扫描线+线段树)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=3022 [题目大意] 给定n个球员,第i个球员年龄为AGEi,水平为SKILLi. 没有 ...

  2. 用flask开发个人博客(26)—— 利用config.py配置文件动态的创建不同的Flask对象

    原文:https://blog.csdn.net/hyman_c/article/details/52877704 对配置进行封装的目的是根据不同的使用场景,给flask的app赋予不同的config ...

  3. lightoj 1244 - Tiles 状态DP

    思路:状态DP dp[i]=2*dp[i-1]+dp[i-3] 代码如下: 求出循环节部分 1 #include<stdio.h> 2 #define m 10007 3 int p[m] ...

  4. java之判断输入的数是否为素数

    import java.util.Scanner; public class TestIsSushu { public static void main(String[] args) { Scanne ...

  5. matlab2016b ubuntu命令行安装 + matconvnet的安装

    0. 下载安装包 下载的文件有Matlab 2016b Linux64 Crack.rar,R2016b_glnxa64_dvd2.iso,R2016b_glnxa64_dvd1.iso. 1. 拷贝 ...

  6. Windows下编译protobuf v3.3.0

    一:概述 关于 protobuf 在此不再多说,此处记录下成功编译步骤以备日后查阅.注意:本文并不是使用cmake gui进行编译的,如果熟悉cmake gui的话,也可以使用gui进行生成编译. 二 ...

  7. 2016.4.3NOI上较难的动规题目(仔细分析样例)--王老师讲课整理

    1.NOI 191:钉子和小球 总时间限制: 1000ms 内存限制:  65536kB 描述 有一个三角形木板,竖直立放,上面钉着n(n+1)/2颗钉子,还有(n+1)个格子(当n=5时如图1).每 ...

  8. while an existing transition or presentation is occurring; the navigation stack will not be updated

    使用UIAlertController提示信息,在之后使用navigation进行逻辑跳转时,出现popToViewController:transition: called on <UINav ...

  9. struts2升级到2.5的配置

    之前的struts版本太低,后来用想过换个后台,但是改动太大,还是升级到最新版本的struts吧,虽然有点蛋疼的经历,最终还是解决了.下面来分享一下我的经历!!! 1.下载struts2   2.5. ...

  10. 动态改变Android控件大小

    Button button = (Button) findViewById(R.id.button2);button.setOnClickListener(myOnClickListener); // ...