CSS伪元素▼在IE中变成乱码

标签 css internet-explorer internet-explorer-9 pseudo-element

我使用 ▼ 字符作为伪元素的内容:

a:after {
    content: '▼';
}

这适用于所有现代(阅读:非 IE)浏览器:

Here you see that it's working correctly in modern browsers

但在 IE(9) 中,我只会得到乱码:

Here you see that it's broken in IE(9)


我猜这与字符编码有关,但我不知道从哪里开始。

最佳答案

确保您的页面和样式表都经过编码并以 UTF-8 格式提供。大多数编辑器应该能够告诉您任何打开文件的编码。

您也可以选择使用 Unicode 序列 \9660 来代替,但同样您需要确保您的文档编码为 UTF-8,否则它也可能无法正常工作:

a:after {
    content: '\9660';
}

或者如果您的样式表有一个 @charset 规则,它需要指向 UTF-8:

@charset "UTF-8";

请注意 @charset rules need to appear at the very beginning of a stylesheet ;在 @imported 文件中,我相信这应该不是问题,但是由于 Sass 实际上在编译期间将通过 @import 规则链接的文件组合在一起,这将导致错误.对于 Sass/SCSS,您需要将 @charset 规则放在主样式表的开头。

关于CSS伪元素▼在IE中变成乱码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9759955/

相关文章:

HTML 表格在 Google Chrome 或 Safari 打印时被截断(太宽)

javascript - 使用纯 Javascript 创建 input type=radio 并按名称检索它们(ie9 上的 ie7 标准)

css - 仅在 IE9 中不显示图像

css - 本地文件上的 Internet Explorer "CSS was ignored due to mime type mismatch"(无服务器)

ajax - XDomainRequest 中止 IE 9 上的 POST

html - Flowplayer 在 IE9 中找不到视频,在 IE8 及以下版本中找不到不支持的视频

javascript - 保持专注于重新加载 HTML 元素

css - 在 sass 中禁用覆盖 calc()

javascript - 我如何处理响应式菜单?

css - IE8没有滚动条