Recently, the problem of garbled pages has been encountered in the project, as follows:
This paragraph uses an a tag, because the copy needs to be switched between "collapse" and "expand" according to the situation, so use the pseudo-class before to set its content property to Chinese: collapse or expand, but in During the test, it was found that sometimes the page would appear garbled, as shown in the figure above.
Check the encoding format of the HTML file and CSS file, both are utf-8, and <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> is also set in the html file
Later, I found the solution: try not to show Chinese in css, if you really want to use Chinese to convert to unicode encoding
E.g:
content: 'Expand';
Use js to get the expanded unicode encoding, the code is as follows:
var _vr = "Expand";
escape(_vr).toLocaleLowerCase().replace(/%u/gi,'\\u')
//"\u5c55\u5f00"
Then css is changed to:
content:'\5C55\5F00';
Problem solved!