2

我有一个网页，我在按钮上使用 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">

但是，三角形不会显示为三角形，它们显示如下：奇怪的文本而不是 unicode 字符

知道为什么它会出现这样的情况以及如何解决吗？

4

2 回答 2

6

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

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

或者对于一个小三角形：

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

这个技巧完全跨浏览器兼容。

于 2012-10-16T01:04:30.133 回答
2

出现 CSS 规则的文档（HTML 或 CSS 文档）与 HTTP 标头一起发送，这些标头指定了除 UTF-8 之外的编码，可能是 ISO-8859-1 或 windows-1252，或者在 CSS 文档的情况下，根本不指定编码，让浏览器猜测。

解决方案是通过更改 HTTP 标头来解决此问题。请参阅 W3C 页面字符编码。

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

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

于 2012-10-16T05:40:41.647 回答