问题:

在进行页面开发时,经常会使用: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. 浅谈分布式CAP定理

    互联网发展到现在,由于数据量大.操作并发高等问题,大部分网站项目都采用分布式的架构.而分布式系统最大的特点数据分散,在不同网络节点在某些时刻(数据未同步完,数据丢失),数据会不一致. 在2000年,E ...

  2. 20172333 2017-2018-2 《Java程序设计》第5周学习总结

    20172333 2017-2018-2 <Java程序设计>第5周学习总结 教材学习内容 1.if语句.if-else语句.switch语句 都是通过对于布尔表达式的结果来进行是否执行下 ...

  3. C# 高德地图调用帮助类 GaodeHelper

    /// <summary> /// 高德地图调用帮助类 /// 更多详情请参考 高德api /// </summary> public class GaodeHelper { ...

  4. JCA 了解

    JCA (J2EE 连接器架构,Java Connector Architecture)是对 J2EE标准集的重要补充.因为它注重的是将 Java程序连接到非Java程序和软件包中间件的开发.连接器特 ...

  5. 如何提高iOS开发能力

    ① 阅读技术博客 在现在这个年代,博客的风头早已被微博盖过.但是每天早上上班后的半小时,一定是打开博客,其中有讨论技术的,也有总结个人的相关经历,读完后肯定会有所收获.阅读博客,还有一个原因是技术博客 ...

  6. web.xml文件的作用及基本配置

    Java的web工程中的web.xml文件有什么作用呢?它是每个web工程都必须的吗? 一个web中完全可以没有web.xml文件,也就是说,web.xml文件并不是web工程必须的. 那什么时候需要 ...

  7. python3将docx转换成pdf,html文件,pdf转doc文件

    直接上代码 # -*- encoding:utf-8 -*- """ author:lgh 简单的doc转pdf,html,pdf转doc脚本 依赖库pdfminer3k ...

  8. shadow 优化

    http://gamedevs.org/uploads/rendering-in-battlefield3.pdf mark 当初看过 ======= sm有两阶段 1生成sm 2采样 第一阶段的优化 ...

  9. TensorFlow------单层(全连接层)实现手写数字识别训练及测试实例

    TensorFlow之单层(全连接层)实现手写数字识别训练及测试实例: import tensorflow as tf from tensorflow.examples.tutorials.mnist ...

  10. 快速实现一个生产者-消费者模型demo

    package jesse.test1; import java.util.concurrent.ArrayBlockingQueue; import java.util.concurrent.Blo ...