问题:

在进行页面开发时,经常会使用: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。可以使用使用站长工具,或者是JavaScript的原生方法escape将中文转为Unicode。需要注意的是Unicode在CSS中的书写方式,例如“限量抢”对应的Unicode是'\u9650\u91cf\u62a2',而在CSS中要写成 span:before { content: '\9650\91cf\62a2' }  。

  

如何避免CSS :before、:after 中文乱码的更多相关文章

  1. CSS中文乱码解决方法

    原文链接:http://caibaojian.com/css-unicode.html 我的CSS里面有一个content用到了中文,作用主要是在前端日报文章中显示出“网页链接”这四个字,然而打开百度 ...

  2. freemarker页面中文乱码

    一.前言 简单的记录freemarker遇到的错误问题:ftl页面中文乱码 由于freemarker整合在ssm框架中,所以笔者直接贴配置代码 <beans xmlns="http:/ ...

  3. CSS字符编码引起乱码

    乱码引起的CSS失效原理:     由于一个中文是两个字符组成,在编码不一致的情况下会引发字符的“重新”组合,(半个汉字的编码字符与后面的字符组合生成新的“文字”)引发原本的结束符合“变异”,从而导致 ...

  4. [转]Filter实现处理中文乱码,转义html标签,过滤敏感词

    原文地址:http://www.cnblogs.com/xdp-gacl/p/3952405.html 在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可 ...

  5. MyEclipse中新建html5中文乱码

    近期刚开始入门html5 和 javascript 用MyEclipse2104创建html5时,遇到浏览器显示中文乱码的问题 [MyEclipse中设置的html5,jsp编码都采用的UTF-8] ...

  6. springMVC获取数据--注意post方法会出现中文乱码问题

    1. 新建web project 2. 加入jar 3. 改写web.xml <?xml version="1.0" encoding="UTF-8"?& ...

  7. RoportNG报表显示中文乱码和TestNG显示中文乱码实力解决办法

    最近在进军测试自动化框架学习阶段,但无意间总是会伴随小问题的困扰,比如中文乱码,而导致显示总是不舒服,个人觉得,就一定要解决,似乎有点点强迫症.所以遇到RoportNG报表显示中文乱码和TestNG显 ...

  8. ReportNG报表显示中文乱码和TestNG显示中文乱码实力解决办法

    最近在进军测试自动化框架学习阶段,但无意间总是会伴随小问题的困扰,比如中文乱码,而导致显示总是不舒服,个人觉得,就一定要解决,似乎有点点强迫症.所以遇到ReportNG报表显示中文乱码和TestNG显 ...

  9. jquery插件导出excel和pdf(解决中文乱码问题)

    参考文件:http://jackyrong.iteye.com/blog/2169683 https://my.oschina.net/aruan/blog/418980 https://segmen ...

  10. zabbix中文乱码的问题

    在使用zabbix时,有时候会出现中文乱码的问题,如下: 因为zabbix自身对中文简体的支持不完善,需要我们手动的去上传新的字体进行替换: 1.在windows获取字体库文件 在Windows上的字 ...

随机推荐

  1. Ubuntu系列问题

    一.Ubuntu16.04 intel_rapl : no valid rapl domains found in packge0 echo 'blacklist intel_rapl' >&g ...

  2. 【bzoj2306】[Ctsc2011]幸福路径 倍增Floyd

    题目描述 一张n个点的有向图,每个点有一个权值.一开始从点$v_0$出发沿图中的边任意移动,移动到路径上的第$i$个点 输入 每一行中两个数之间用一个空格隔开. 输入文件第一行包含两个正整数 n,  ...

  3. 【bzoj4177】Mike的农场 网络流最小割

    题目描述 Mike有一个农场,这个农场n个牲畜围栏,现在他想在每个牲畜围栏中养一只动物,每只动物可以是牛或羊,并且每个牲畜围栏中的饲养条件都不同,其中第i个牲畜围栏中的动物长大后,每只牛可以卖a[i] ...

  4. 浅析_tmain() 与 main() 函数的区别

    _tmain()是为了支持Unicode所使用的main的一个别名,既然是别名,应该有宏定义过的,在<stdafx.h>里 #include <stdio.h> #indlud ...

  5. Asymptotic I Catalan Number

    卡特兰数出现在许多计数问题中. 常见的例子有:$n$ 个节点的有序二叉树,$2n$ 个括号构成的合法括号序列. 在上面所举的两个例子中,很容易看出卡特兰数满足递推: $$ C_{n+1} = \sum ...

  6. 【BZOJ1179】[Apio2009]Atm (tarjan+SPFA)

    显而易见的tarjan+spfa...不解释了 ; type edgetype=record toward,next:longint; end; var edge1,edge2:..maxn] of ...

  7. 【BestCoder #45】

    用家里的电脑来编程,各种不算 一开始15分钟刷掉T1和T2,然后就永远地卡在了T3... 后来看题解,傻了眼... 它强调的“只有一个答案”我还以为这是在提示我二分答案,于是我一直往权值线段树那个方向 ...

  8. spring in action学习笔记十五:配置DispatcherServlet和ContextLoaderListener的几种方式。

    在spring in action中论述了:DispatcherServlet和ContextLoaderListener的关系,简言之就是DispatcherServlet是用于加载web层的组件的 ...

  9. tornado 坑集合

    1.没有自己的session管理 2.path入参要用括号圈起来,才能获取到 3.接收post参数 data = json.loads(self.request.body)ddd = data[&qu ...

  10. 自定义View Draw过程(4)

    目录 目录 1. 知识基础 具体请看我写的另外一篇文章:自定义View基础 - 最易懂的自定义View原理系列 2. draw过程作用 绘制View视图 3. draw过程详解 同measure.la ...