问题:

在进行页面开发时,经常会使用: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. Codeforces Round #345 (Div. 1) E. Clockwork Bomb 并查集

    E. Clockwork Bomb 题目连接: http://www.codeforces.com/contest/650/problem/E Description My name is James ...

  2. centos yum命令报错

    Loaded plugins: fastestmirror, security Loading mirror speeds from cached hostfile Could not retriev ...

  3. JavaScript 巧学巧用

    关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来, ...

  4. 原生js操作HTML DOM

    先上图 1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表( ...

  5. openresty记录响应body乱码问题

    问题背景 最近新上了一个功能,openresty通过syslog记录请求日志,然后由logstash推送至ES.测试上线时未发现这个问题,在日常查看日志的过程中,发现logstash推送有错误日志,错 ...

  6. 剖析ASP.NET Core(Part 3)- UseMvc(译)

    原文:https://www.stevejgordon.co.uk/asp-net-core-anatomy-part-3-addmvc 发布于:2017年4月环境:ASP.NET Core 1.1 ...

  7. 【文件监控】之一:理解 ReadDirectoryChangesW part1

    理解 ReadDirectoryChangesW 原作者:Jim Beveridge 原文:http://qualapps.blogspot.com/2010/05/understanding-rea ...

  8. Linux的进程间通信-文件和文件锁

    前言 使用文件进行进程间通信应该是最先学会的一种IPC方式.任何编程语言中,文件IO都是很重要的知识,所以使用文件进行进程间通信就成了很自然被学会的一种手段.考虑到系统对文件本身存在缓存机制,使用文件 ...

  9. MyEclipse安装后需要进行的配置

    摘自: http://hi.baidu.com/timesten/item/c826983a6f9654ffde2221c0 MyEclipse安装后需要进行的配置 在MyEclipse中编写Web ...

  10. WinForm客户端调用 WebService时 如何启用Session

    WinForm客户端调用 WebService时 如何启用Session 摘自: http://www.cnblogs.com/swtseaman/archive/2011/04/18/2020176 ...