Unicode down triangle doesn't show up in IE9 - html

Question

I'd like to include a down triangle in my CSS dropdown menu. It works correctly in every browser, except for IE9.
In normal browsers (Firefox, Opera, Chrome, etc.) it looks like this way:
However in IE9 it shows up like this:
The CSS code:
.parent-down > em:after,
.parent-down > a > em:after {
content: "\25be";
}
Any idea what can be the problem and how could I fix it?

Answer 1

You need to declare the font family for the (pseudo-)element containing the special character so that you use only fonts that are known to contain that character. For example, add the following rule into your declaration:
font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif;
When you declare Helvetica, as you say (in a comment) you do, Windows treats it as Arial by its own special internal rules (if Helvetica is not available, and it usually isn’t). Since Arial does not contain the character, the browser should check the different fonts in the system in some order set by its settings to find one that contain the character. Browsers may fail in doing so, and IE often does.
In this case, it is probably better to use another, more visible character, which happens to have better font coverage. The basic principle is still that special characters need special attention when declaring fonts. For generalities on this, see my Guide to using special characters in HTML.

Answer 2

I came to the solution by accident.
However IE9 doesn't show the "\25be" (▾) character, it shows the "\25bc" (▼).
It's the same down triangle, however somewhat bigger. So now I use this one and change its size with CSS, so it looks identical with the original version.
Don't ask why, IE9 is quite strange.
My new code:
.parent-down > em:after,
.parent-down > a > em:after {
content: "\25bc";
font-size: 8px;
vertical-align: 2px;
margin-left: 2px;
}

Answer 3

There is a bug in IE9 that causes the font of a container to be set to the font of the first element of that container. Try to set a :before selector like this:
.parent-down >em:before,
.parent-down> a > em:before {
content: '';
}
This will force IE9 to recognize that the font assigned to the container is the font meant to be used
See this site, which describes a similar issue and gives this workaround, which solved this very tricky problem for me.