Question

我想在CSS下拉菜单中添加一个向下三角形。它在每个浏览器中都能正常工作，IE9除外。

在普通浏览器（Firefox，Opera，Chrome等）中，它看起来像这样：
normal

然而在IE9中它显示如下：
ie9

CSS代码：

.parent-down > em:after, 
.parent-down > a > em:after  {
    content: "\25be";
}

知道可能出现什么问题，我该如何解决？

Answer 1

您需要为包含特殊字符的（伪）元素声明字体系列，以便仅使用fonts that are known to contain that character。例如，将以下规则添加到您的声明中：

font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif;

当您声明Helvetica时，正如您所说（在评论中），Windows会通过其自己的特殊内部规则将其视为Arial（如果Helvetica不可用，通常不是）。由于Arial不包含该字符，因此浏览器应按照其设置按某种顺序检查系统中的不同字体，以找到包含该字符的字体。浏览器可能会失败，IE经常这样做。

在这种情况下，最好使用另一个更明显的字符，它恰好具有更好的字体覆盖率。声明字体时，基本原则仍然是特殊字符需要特别注意。有关此问题的一般性，请参阅我的Guide to using special characters in HTML。

Answer 2

我意外地找到了解决方案。

但是IE9没有显示"\25be"（▾）字符，它显示"\25bc"（▼）。

它是相同的下三角形，但有点大。所以现在我使用这个并用CSS改变它的大小，所以它看起来与原始版本相同。不要问为什么，IE9很奇怪。

我的新代码：

.parent-down > em:after, 
.parent-down > a > em:after  {
    content: "\25bc";
    font-size: 8px; 
    vertical-align: 2px;
    margin-left: 2px;
}

Answer 3

IE9中存在一个错误，导致容器的字体设置为该容器的第一个元素的字体。尝试设置:before选择器，如下所示：

.parent-down >em:before,
.parent-down> a > em:before {
    content: '';
}

这将强制IE9识别分配给容器的字体是要使用的字体

请参阅this site，其中介绍了类似问题，并提供了此解决方法，为我解决了这个非常棘手的问题。