Question

我有一个带有由以下css代码影响的V形子弹点的ul列表：

ul li::before { 
content : "»"; 
padding-right: 0.3em;
}

最初显示正确;然而，一段时间后，子弹点变为»。这是通过清除缓存修复（暂时），但问题将再次发生，我不能为我的生活解决为什么额外的角色出现。我试过内容：“\»”和内容：“\ 00bb”，但同样的问题发生了。这种情况发生在Chrome中，我思考也是Safari，在我的本地开发环境以及实时网站（http://markfisher.photo - 有问题的列表位于“我在其他地方”的底部。

更多信息（相当令人困惑，但如果你关注你可能会强迫问题在Chrome中显示）：

有趣的是，现在查看我的实时网站，即使它在页面上显示正确，在检查列表时，Chrome devtools表示css实际上是内容：“\”»。使用devtools打开刷新页面会改变这一点，因此它在页面和Chrome devtools中都是正确的。但是，如果我打开页面（正确显示），打开Chrome devtools（显示额外的Â）然后关闭devtools然后刷新，页面上会显示额外的Â。

任何想法都会非常感激。

Answer 1

http://markfisher.photo/code/css/footer.css，在浏览器中直接调用时，已经以这种方式显示：

div.quick_links ul li::before { 
   content : "\Â»";

然后在浏览器中将编码显式切换为UTF-8，然后使其成为"\»"。

尝试专门告诉浏览器此样式表是以UTF-8编码的，方法是让服务器向charset标题添加Content-Type，以便它变为

Content-Type: text/css; charset=UTF-8

或放置

行

@charset "utf-8";

在样式表的最开头。

Answer 2

您可能希望将编码更改为UTF-8。添加

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

到你的文件头，看看额外的是否会消失。

CSS：在内容值更改之前，直到清除缓存

2 个答案: