问题:

在进行页面开发时,经常会使用: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. try-catch-finally容易犯的错误

    测试环境 JDK1.8 1. catch中包含return //有return的时候 输出13423 //无return的时候 输出134234 public class Trycatch { pub ...

  2. [类和对象]3 C++面向对象模型初探

    ? C++编译器如何完成面向对象理论到计算机程序的转化? [C++编译器是如何管理类.对象.类和对象之间的关系] 通过下面的代码,我们可以的得出:C++类对象中的成员变量和成员函数是分开存储的 成员变 ...

  3. 课时34:丰富的else语句以及简洁的with语句

    目录: 一.丰富的else语句 二.简洁的with语句 三.课时34课后习题及答案 *********************** 一.丰富的else语句 ********************** ...

  4. GCC 7.3 for Windows

    GCC 6.1x Compilers 下载地址1: Mingw gcc 6.30下载 这个是某微软员工编译的版本 MinGW is a port of GCC to Windows. It is fr ...

  5. ExtJS Ext.MessageBox.alert()弹出对话框详解

    Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者 ...

  6. Alpha 冲刺

    队名:我头发呢队 组长博客 作业博客 杰(组长) 过去两天完成了哪些任务 查阅Python爬取音源的资料,如 Python3爬虫抓取网易云音乐热评实战 Python爬取高品质QQ音乐(2) 如何爬网易 ...

  7. asp.net 条码 一维条码 生成, 一共有32中格式类型

    想用asp.net 实现条码功能,网上找了代码都不全. 终于找到了一个非常全的DLL 是winForm的,原以为不能用在WEB 上结果 可以使用. 首先,引用 DLL 不必说了,下面是 使用设置.还有 ...

  8. SheetJS & Error: Sheet names cannot exceed 31 chars

    SheetJS Error: Sheet names cannot exceed 31 chars title + version https://github.com/SheetJS/js-xlsx ...

  9. easyui中的依赖关系

    参考自:http://www.easyui.info/archives/765.html 在使用easyui的过程中发现各个组件直接存在依赖关系,也就是上层的复杂组件依赖于一个或者多个简单组件,复杂组 ...

  10. THUWC2018 题解

    2018清华冬令营 又一次由于接连而至的玄学现象跪惨,错失良机,就不再公开提我这次惨痛的经历了,写点干货-- day1 A 零食 (1s, 1G) 试题简述 \(n\) 种物品1,\(m\) 种物品2 ...