CSS 伪元素 ▼ 在 IE 中变得乱码
Posted
技术标签:
【中文标题】CSS 伪元素 ▼ 在 IE 中变得乱码【英文标题】：CSS pseudo element ▼ becomes gibberish in IE 【发布时间】：2012-04-03 08:02:58 【问题描述】：我使用 ▼ 字符作为我的伪元素的内容：
a:after
content: '▼';
这适用于所有现代（阅读：非 IE）浏览器：
但在 IE(9) 中，我只会乱码：
我猜这与字符编码有关，但我不知道从哪里开始。
【问题讨论】：
你试过content: '\9660';吗？您的 CSS 文件和网页是否使用相同的字符集？您的 CSS 中的 @charset 是否与其 MIME 类型不同？
【参考方案1】：
确保您的页面和样式表均以 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 规则放在主样式表的开头。
【讨论】：
我正在使用 SASS，我刚刚意识到他们正在将@charset "IBM437"; 添加到我的 CSS 文件的开头。我能做些什么吗？
@MegaHit：改成@charset "UTF-8";
您是说每次保存 SASS 文件后我都必须更改它吗？有没有办法阻止 SASS 在那里添加它？
根据groups.google.com/forum/?fromgroups#!topic/sass-lang/… SASS 是这样添加的，因为您的输入文件是用 IBM437 编码的；您应该将输入文件更改为 UTF-8。
@Domenic - 我已经检查了两次和三次，但我的.scss 文件肯定是使用 UTF-8 编码的。【参考方案2】：
除了@BoltClock 的回答，一定要send appropriate headers from your server，也许只是为了更好的衡量，在你的<head> 标签中添加一个<meta charset="utf-8" />。
【讨论】：
【参考方案3】：您也可以尝试在菜单中添加背景图片。
abackground:url("http://pathtoyourimage/");
【讨论】：
以上是关于CSS 伪元素 ▼ 在 IE 中变得乱码的主要内容，如果未能解决你的问题，请参考以下文章
IE9 是不是支持 CSS3 ::before 和 ::after 伪元素？