解决——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 ...
随机推荐
- 【前缀和】【枚举倍数】 Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D. Arpa and a list of numbers
题意:给你n个数,一次操作可以选一个数delete,代价为x:或者选一个数+1,代价y.你可以进行这两种操作任意次,让你在最小的代价下,使得所有数的GCD不为1(如果全删光也视作合法). 我们从1到m ...
- 【枚举】【SPFA】Urozero Autumn Training Camp 2016 Day 5: NWERC-2016 Problem I. Iron and Coal
那个人派出的队伍的行走的路径一定前半程是重合的,后半程分叉开来. 于是预处理每个点离1号点的最短路,到最近的铁的最短路,到最近的煤的最短路.(三次BFS / SPFA)然后枚举分岔点,尝试更新答案即可 ...
- 【枚举+贪心】POJ2718-Smallest Difference
[题目大意] 按升序输出几个不同的数字,任意组成两个数字,输出最小的差值. [思路] 虽然是在穷竭搜索的章节里找到的题目,但是我觉得不需要穷竭搜索,枚举一下就可以了,0MS.分为一下三种情况: (1) ...
- [NOIp2016提高组]换教室
题目大意: 有n节课,第i节课在c[i]上课,同时d[i]也有一节课d[i]. 你有权利向教务处发出m次申请把自己的教室改到d[i],相应的批准概率是k[i]. 教室是图上的一些点,其中每条边都有边权 ...
- [转]MySQL与Oracle 差异比较之一数据类型
数据类型 Oracle MySQL 1 NUMBER int / DECIMAL DECIMAL就是NUMBER(10,2)这样的结构INT就是是NUMBER(10),表示整型:MYSQ ...
- PHP 正则表达式匹配 img ,PHP 正则提取或替换图片 img 标记中的任意属性。
PHP正则提取或替换img标记属性 PHP 正则表达式匹配 img ,PHP 正则提取或替换图片 img 标记中的任意属性. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...
- Elasticsearch 5.5.1的安装和入门教程(转)
说明:转自老阮的文章,业界最简单的入门教程.一切的安装的运行建议不要用root权限,最好是当前用户下的权限. 作者: 阮一峰 日期: 2017年8月17日 全文搜索属于最常见的需求,开源的 Elast ...
- Web安全测试指南--文件系统
上传: 编号 Web_FileSys_01 用例名称 上传功能测试 用例描述 测试上传功能是否对上传的文件类型做限制. 严重级别 高 前置条件 1. 目标web应用可访问,业务正常运行. 2. 目 ...
- Inno Setup入门(十六)——Inno Setup类参考(2)
Inno Setup入门(十六)——Inno Setup类参考(2) http://379910987.blog.163.com/blog/static/33523797201112755641236 ...
- vscode快捷键-for mac
默认显示当前所有页面: command p ?: 显示可操作方法 >: 打开命令面板, 同comand shift p : : 跳转到对应行数 @: 搜索并跳转到应变量或函数 @: : 同上,分 ...