问题:

在进行页面开发时,经常会使用: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. (原、整)Unreal源码 CoreUbject- Uobject

    (原.整) Unreal源码 CoreUbject- Uobject 类别                    [随笔分类]Unreal源码搬山 @author:白袍小道 随缘那啥 这里还是属于UE ...

  2. scrapy图片-爬取哈利波特壁纸

    话不多说,直接开始,直接放上整个程序过程 1.创建工程和生成spiders就不用说了,会用scrapy的都知道. 2.items.py class HarryItem(scrapy.Item): # ...

  3. php 链接转二维码图片

    // 类库下载地址 https://sourceforge.net/projects/phpqrcode/files/ $value = 'www.baidu.com';//二维码内容 $errorC ...

  4. 【Android】实验7 BindService模拟通信 截止提交日期2016.5.3

    实验7 BindService模拟通信 [目的] 实现启动端和BindService之间的双向通信 [要求] 1)   实现从启动端传递一个数据至BindService端: 2)   实现使用Bind ...

  5. 第十一篇:MySQL基础

    本篇内容 MySQL概述 MySQL安装 MySQL库增.删.改.查 MySQL表增.删.改.查 MySQL表记录增.删.改.查 一. MySQL概述 MySQL是一个关系型数据库管理系统,由瑞典 M ...

  6. [AGC010E] Rearranging [拓扑排序+堆]

    题面 传送门 思路 首先,一个显然的结论是:Alice调整过后的序列中任意两个不互质的数的相对顺序无法改变 那么我们可以以这个性质为突破口 我们在两个不互质的权值的点之间连一条边(没错这是个图论题!! ...

  7. 泛型与非泛型集合类的区别及使用例程,包括ArrayList,Hashtable,List<T>,Dictionary<Tkey,Tvalue>,SortedList<Tkey,Tvalue>,Queue<T>,Stack<T>等

    泛型与非泛型集合类在C#程序中是非常重要的一个基础概念,这里列一个表来进行对比: 非泛型集合类 泛型集合类 描述 ArrayList List<T> 表示具有动态大小的对象数组 Hasht ...

  8. 02 Java 基础语法

    在开始 Java 基本语法之前,先说明 Java 程序的基本规范: 大小写敏感,例如 Person 和 person 是不同的 类名首字母大写,如果类名由多个单词组成,每个单词首字母都大写,例如 He ...

  9. JSON.stringify与jQuery.parseJSON

    1.JSON.stringify,这个函数的作用主要是为了系列化对象的.(或者说是将原来的对象转换为字符串的,如json对象): 首先定义一个json对象,var jsonObject = { &qu ...

  10. 【ZOJ4070】Function and Function(签到)

    题意:求 k 层嵌套的 f(x) 0<=x,k<=1e9 思路:迭代不会很多次后函数里就会=0或者1,再看层数奇偶直接返回答案 #include<cstdio> #includ ...