Question

我在CSS代码中使用 multiplication sign × ，如下所示：

.specific_tag_cases a:after{
    position: absolute;
    font-family: Arial;
    background-color: #c1c1c1;
    color: white;
    content: "×";
    padding: 0px 3px;
    margin-top: 6px;
    margin-right: 4px;
    font-size: 11px;
    border-radius: 50%;
    width:13px; 
    height:12px; 
}

但是在重新加载页面后，内容将被替换为：

    content: "Ã—";

我怎样才能避免这种奇怪的行为？

Answer 1

您的CSS文件需要以UTF-8
您的HTML文件需要以UTF-8
您的HTML需要以UTF-8格式提供

.fman a:after {
    content: "×";
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test "×"</title>
</head>
<body class="fman">
<a href="#">test</a>
</body>
</html>

在您的情况下，看起来×被编码为UTF-8，即0xc3，0x97，但在浏览器中被解释为Windows 1252：< / p>

Ã195（0xc3）

和

- 151（0x97）

如果您的服务器已正确配置为以UTF-8编码的形式提供UTF-8编码文档，则可以省略<meta charset="utf-8">，但如果提供的信息错误或没有，浏览器将尝试猜测或应用默认值。

Answer 2

您最好在css content媒体资源中使用其转义的unicode版本。

乘法符号的值为\00D7

＆＃13;

.specific_tag_cases a:after{
    position: absolute;
    font-family: Arial;
    background-color: #c1c1c1;
    color: white;
    content: "\00D7";
    padding: 0px 3px;
    margin-top: 6px;
    margin-right: 4px;
    font-size: 11px;
    border-radius: 50%;
    width:13px; 
    height:12px; 
}

＆＃13;

<div class="specific_tag_cases">
  <a>link</a>
</div>

＆＃13;

为什么乘法符号会转换为奇怪的字符？

2 个答案: