设置按钮后，为什么我会随机获取字符串“Ã-”而不是“×”：{content}之后？

Question

我使用以下css设置删除标记的按钮的文本：

button.close:after {
  content: '×';
}

这会产生一个好看的按钮，如下所示：

但随机字符串×被字符串Ã-取代。我首先想到这可能与编码有关，但如果确实是问题，我认为这不会随机发生。它发生频率较低，此时它没有发生（一旦再次发生，就会用另一个打印屏幕更新问题）。

这个css代码来自我编译的.less文件，然后缩小然后连接。

如何确保字符串×始终显示？

Answer 1

multiplication character具有UTF-8序列0xC3 0x97。当使用Windows-1252 character set对其进行解码时，它会变为×（A tilde，em dash）。

所以，问题确实是CSS被解码为Windows-1252而不是UTF-8。 CSS通常以与HTML文档相同的方式进行解码，因此似乎页面中和HTTP头中都没有字符集规范netier。这迫使浏览器猜测编码是什么。由于浏览器使用任何可用数据进行猜测（并且算法在浏览器之间有所不同），猜测可能会有所不同，具体取决于页面和相关文件的数量已经在缓存中。

在HTML头中指定页面的编码：

<meta charset="utf-8">

您还可以通过在顶部添加此文件来专门为CSS文件指定编码，但只有在它与页面编码不同时才需要：

@charset "utf-8";

Answer 2

尝试为该符号使用“ISO”值 - \00d7

点击此处：https://css-tricks.com/snippets/html/glyphs/

Answer 3

如果您看到这些字符，您可能只是没有正确指定字符编码。因为这些字符是使用ISO 8859-1或Windows-1252等单字节编码解释UTF-8多字节字符串时的结果。

使用utf8_decode（）将它们转换为普通的ISO-8859-1字符。 http://php.net/manual/en/function.utf8-decode.php

或添加

<meta charset="UTF-8">

或在PHP脚本之上使用header("Content-Type: text/html; charset=utf-8");。