Unicode字符，向下三角形，显示为奇怪的文本

Question

我有一个网页，我在按钮上使用unicode向下三角形表示选择这些按钮会显示下拉列表。

我正在css中添加三角形：

    .icon:after {
        content:"▼";
    }
    .icon {
        width:12px;
        height:12px;
        margin: 3px;
        display: inline-block;
        cursor:default;
    }

页面中的元标记是：

    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; chrome=1" >
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

但是，三角形不显示为三角形，它们显示如下：

知道为什么它会像这样出现以及如何解决它？

Answer 1

您可以使用任何类型的unicode字符来塑造所有类型的字符。 例如，在您的情况下，您只需使用以下内容：

.icon:after {
    content:"\25bc";
}

或小三角形：

.icon:after {
    content:"\25be";
}

这个技巧完全可以与浏览器兼容。

Answer 2

出现CSS规则的文档（HTML或CSS文档）与HTTP标头一起发送，该标头指定UTF-8以外的编码，可能是ISO-8859-1或windows-1252，或者，如果是CSS文档，根本不指定编码，使浏览器猜测。

解决方案是通过更改HTTP标头来解决此问题。请参阅W3C页面Character encodings。

如果HTTP标头未指定编码，则文档内部的然后字符集声明可能会生效。

使用字符转义可能有助于消除症状，但为了避免将来出现问题（当有人在文档中添加奇怪的字符时），最好修复编码问题。