css样式中 before、after 里面的 content 乱码

目录

一、问题

二、原因

三、总结


一、问题

1.代码在本地没有问题,打包放在线上在时候,竟然测试测的时候看到element的字体图标有时候显示乱码,如下图1-1所示。更奇葩的是偶现,只有测试看见了,很难复现。。。

图1-1 乱码

2.没办法,只能显示环境f12看看,结果在浏览器看到:有一个行内样式style竟然覆盖了原本正确的css样式。啊,什么东西呀,还没有遇到过这种问题呢。

具体情况如下图1-1所示:

css样式中 before、after 里面的 content 乱码_第1张图片 图 2-2 浏览器看到样式被覆盖

二、原因

1.搜了一下,看到大家都说  theme-chalk这个包下面的src/index文件有关。看到一个解决方法是这样的【web前端】element-ui框架在线上环境偶尔出现iconfont图标乱码的问题,解决办法 - 简书,(你可以先试试这个,我尝试了没有用)

2.于是就自己去代码里面找到引入 theme-chalk/src/index的文件,在variables.scss中被引入;还在另外一个地方被引入。

3.删除重复引入即可(只需要在一个文件中引入下面代码即可)

$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index"; 

4.自己的content乱码输入了中文字符(需要在中文unicode互转网站在线unicode转中文,中文转unicode-BeJSON.com上把中文转义成unicode)

1) css中使用要去除 转义好的unicode里面的 u,如下面的  ”—“ 在css中使用:content:'\2014'

css样式中 before、after 里面的 content 乱码_第2张图片 图2-1  中文转unicode

2)js可以直接使用转义好的字符

3)html、css、js使用转义字符的规则,如下图2-2所示

css样式中 before、after 里面的 content 乱码_第3张图片 图2-2  使用转义字符的规则

三、总结

1.前端content乱码的原因目前遇到两种

   1)element 字体图标乱码:可能是项目里面重复引入下面的样式。

         解决方法: 删除重复样式即可

$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index"; 

   2)自己的content乱码:使用了中文字符。

       解决方法:中文转义成unicode即可

2.css样式中不要使用中文字符!!!

3.又长了一次见识,真好,就是有点累 @_@

4.完结,节日快乐!

/*

希望对你有帮助!

如有错误,欢迎指正,非常感谢!

*/

你可能感兴趣的:(1024程序员节)