问题:

在进行页面开发时,经常会使用: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. [OpeCV] highgui头文件

    通过HighGUI(high-level graphical user interface)可以实现打开窗口.显示图像.读出和写入图像文件,处理鼠标.光标.键盘事件. 而HighGUI主要分成“视频输 ...

  2. PAT——甲级1042:Shuffling Mashine

    终于做到甲级了 就一个感觉....题目是真的看不懂,亏我还是四六级都过了的人....可是看完题愣是一点都不懂是什么意思. 1042 Shuffling Machine (20 point(s)) Sh ...

  3. STL之heap使用简介

    STL中并没有把heap作为一种容器组件,heap的实现亦需要更低一层的容器组件(诸如list,array,vector)作为其底层机制.Heap是一个类属算法,包含在algorithm头文件中.虽然 ...

  4. php学习ing

    cmd运行,表示在本地d:/php/workspace下文件映射在127.0.0.1的8080端口下,-S -t不要忘记 php -S 127.0.0.1:8080 -t E:\class_manag ...

  5. Thread 线程池

    Thread 线程池: 当使用多个较短存活期的线程有利时,运用线程池技术可以发挥作用.运用这一技术时,不是为每个任务创建一个全新的线程,而可以从线程池中抽出线程,并分配给任务.当线程完成任务后,再把它 ...

  6. 在LinkedIn的 Kafka 生态系统

    在LinkedIn的 Kafka 生态系统 Apache Kafka是一个高度可扩展的消息传递系统,作为LinkedIn的中央数据管道起着至关重要的作用. Kafka 是在2010年在LinkedIn ...

  7. 【bzoj5056】OI游戏 最短路+矩阵树定理

    题目描述 给出一张无向图,求满足 0号点到所有点的路径长等于原图中它们之间最短路 的生成树的个数. 输入 第一行一个整数N,代表原图结点. 接下来N行,每行N个字符,描绘了一个邻接矩阵.邻接矩阵中, ...

  8. BZOJ 1014 [JSOI2008]火星人prefix | Splay维护哈希值

    题目: 题解: #include<cstdio> #include<algorithm> #include<cstring> typedef long long l ...

  9. Codeforces755D PolandBall and Polygan

    题目戳这里 我们只需要计算每增加一条线后穿过了几条已有的线即可.为了方便,我们令\(K \le N/2\),并且给每条线一个方向,即\(x\)到\((x+K) \; mod \; N\).然后我们假设 ...

  10. [解决方案]NuGet打包报错: 'X' already has a dependency defined for 'Y'

    大家在打包Nuget包的时候,最后会执行以下语句 nuget pack .\ML.Common.SDK.csproj -Prop Configuration=Release 执行此句后,提示以下报错信 ...