问题:

在进行页面开发时,经常会使用: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. 孤荷凌寒自学python第六天 列表的嵌套与列表的主要方法

    孤荷凌寒自学python第六天 列表的嵌套与列表的主要方法 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) (同步的语音笔记朗读:https://www.ximalaya.com/keji/1 ...

  2. pytorch版本问题:AttributeError: 'module' object has no attribute '_rebuild_tensor_v2'

    用pytorch加载训练好的模型的时候遇到了如下的问题: AttributeError: 'module' object has no attribute '_rebuild_tensor_v2' 到 ...

  3. Java的HttpClient的实现

    HttpClient的概念就是模仿浏览器请求服务端内容,也可以做App和Server之间的链接. 这个是关于Java的HttpClient的简单实例,其实java本身也可以通过自己的net包去做,但是 ...

  4. Linux下性能测量和调试诊断工具Systemtap

    一.简介 SystemTap是一个诊断Linux系统性能或功能问题的开源软件.它使得对运行时的Linux系统进行诊断调式变得更容易.更简单.有了它,开发者或调试人员不再需要重编译.安装新内核.重启动等 ...

  5. 设计模式之策略模式的Python实现

    1. 策略模式解决的是什么问题 策略模式解决的应用场景是这样的: 在业务场景中,需要用到多个算法,并且每个算法的参数是需要调整的.那么当不同的行为堆砌到同一个类中时,我们很难避免使用条件语句来选择合适 ...

  6. Oracle在登陆时被告知用户被锁,如何解决?

    在登陆时被告知test用户被锁 1.用dba角色的用户登陆,进行解锁,先设置具体时间格式,以便查看具体时间 SQL> alter session set nls_date_format=’yyy ...

  7. POJ 2828 Buy Tickets | 线段树的喵用

    题意: 给你n次插队操作,每次两个数,pos,w,意为在pos后插入一个权值为w的数; 最后输出1~n的权值 题解: 首先可以发现,最后一次插入的位置是准确的位置 所以这个就变成了若干个子问题, 所以 ...

  8. BZOJ4300 绝世好题 【dp】

    题目 给定一个长度为n的数列ai,求ai的子序列bi的最长长度,满足bi&bi-1!=0(2<=i<=len). 输入格式 输入文件共2行. 第一行包括一个整数n. 第二行包括n个 ...

  9. vue-计算属性-computed

    /* 计算属性:vue中对数据进行一些组合与计算的话,可以使用computed(计算属性); //例如:获取当前日期,组合 */ // 组合变成10-1 var vm = new Vue({ el: ...

  10. Windows 2008 R2无法打补丁

    遇到了Windows 2008 R2无法打补丁,并且控制台上的feature和roles都是error 可下载这个补丁进行修复: System Update Readiness Tool for Wi ...