解决——CSS :before、:after ,当content使用中文时有时候会出现乱码
问题:
在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码。
例如我遇到一个分页的问题:
正常时这样的:
有时候会出现乱码变成这样子:
解决方案:
- 确保HTML、CSS文件使用UTF-8格式,并且HTML文档也使用UFT-8的字符编码格式,即HTML文档的meta信息包含 <meta charset="UTF-8"> 。
- 避免在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使用中文时有时候会出现乱码的更多相关文章
- PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码
这 个问题的出现的前提是本站代码采用utf-8格式,php空间当页面停留在搜索页面时,在浏览器的地址栏输入中文的关键字进行搜索时会出现乱码,在网上查找资料说 明,是因为浏览器默认将url中的中文字符编 ...
- 解决backbone url请求中参数有中文,存入数据库是乱码
最近项目用到了backbone 做前后端的分离方案,遇见了中文乱码问题,解决方案总结如下: 假设需要存一条课程记录到后台 model定义如下: var AddCourse= Backbone.Mo ...
- 怎么用一行代码解决CSS各种IE各种兼容问题
用一行代码来解决CSS在,IE6,IE7,IE8,IE9,IE10 中的各种兼容性问题. 在网站前端写代码的过程中,很多时间IE各个版本的兼容问题很难整.现在百度与谷歌都有了一行解决这种兼容性的代码了 ...
- 解决springmvc使用ResponseBody注解返回json中文乱码问题
spring版本:4.2.5.RELEASE 查看“org.springframework.http.converter.StringHttpMessageConverter”源码,中有一段说明: B ...
- nginx实现动态分离,解决css和js等图片加载问题
改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...
- 解决ubuntu中zip解压的中文乱码问题
转自解决ubuntu中zip解压的中文乱码问题 在我的ubuntu12.10中,发现显示中文基本都是正常的,只有在解压windows传过来的zip文件时,才会出现乱码.所以,我用另一个方法解决中文乱码 ...
- 解决Ubuntu下sublime中不能输入中文的问题
解决Ubuntu下sublime中不能输入中文的问题 Ubuntu下安装sublime后,不能输入中文,而在其他软件中能正常输入,这是sublime的bug,解决方案是在通过shell在每次运行sub ...
- 利用IIS部署WEB网站以及解决CSS/JS不能显示问题
利用IIS部署WEB网站以及解决CSS/JS不能显示问题 转载声明:http://blog.sina.com.cn/s/blog_a001e5980101b4kt.html vs中正常IIS发布网站后 ...
- php函数:解决数组转对象时数组内中文乱码问题
function to_urlencode(&$arr){//解决数组转对象时数组内中文乱码问题 foreach($arr as $key => $value){ if(is_array ...
随机推荐
- 【DFS】Paintball(6-22)
[UVA11853]Paintball 算法入门经典第6章6-22(P175) 题目大意:有一个1000*1000的正方形战场,西南角坐标(0,0),西北角坐标(0,1000),有n个敌人,每个敌人处 ...
- BZOJ 2430 [Poi2003]Chocolate(贪心+归并排序)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2430 [题目大意] 有一块n*m的矩形巧克力,准备将它切成n*m块. 巧克力上共有n- ...
- 【数论】【欧拉函数】CDOJ1724 为了我们心爱的京电
京州电子科技大学遭遇废校危机,为了保护我们心爱的学校,N位魔法少女站了出来,她们能做的就是……成为偶像! 每个魔法少女都拥有一定的人气,他们中的每个人的人气计算方式如下: 假设某个魔法少女的学号为a, ...
- bzoj 1689: [Usaco2005 Open] Muddy roads 泥泞的路
1689: [Usaco2005 Open] Muddy roads 泥泞的路 Description Farmer John has a problem: the dirt road from hi ...
- bzoj 3140: [Hnoi2013]消毒
3140: [Hnoi2013]消毒 Description 最近在生物实验室工作的小T遇到了大麻烦. 由于实验室最近升级的缘故,他的分格实验皿是一个长方体,其尺寸为a*b*c,a.b.c 均为正整数 ...
- 神勇的产品经理之路系列-10 PD三板斧
一.三板斧的来源及理解 三板斧 古代长兵器的一种,又名“马战斧”.相传为程咬金所用.斧阔五寸,柄长七尺.用法有劈.砍.剁.搂.截.撩.云.片.推.支等. 比喻义:解决问题的方法不多,但却非常管用. ...
- jquer总结
前端jq总结 选择器********************************************************************** 1,基本选择 器 #id .clss ...
- 面试通用tips--来源某猎头人员
- 实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性、网格、瀑布流效果演示
实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性.网格.瀑布流效果演示 效果预览 实例APP 小米应用商店 使用方法 build.gradle文件 dependenc ...
- cpu个数、核数、线程数、Java多线程关系的理解
cpu个数.核数.线程数.Java多线程关系的理解 2017年12月08日 15:35:37 一 cpu个数.核数.线程数的关系 cpu个数:是指物理上,也及硬件上的核心数: 核数:是逻辑上的,简单理 ...