How can I make Chinese characters show in IE8 without forcing compatibility mode?

Question

All the solutions for this issue say to use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />, which works because it forces the browser to render in compatibility view (i.e. as if it were IE7), but then the characters don't display when the user is actually using IE7 (or a number of other browsers). Instead, I see squares.

Anyone else encounter this? How did you deal with it?

Solution 1

Setting the following font-family in CSS worked for me:

font-family: Arial Unicode MS, Arial, Helvetica, sans-serif;

Because in this case, Arial Unicode MS is the only available font for Chinese Simplified.

Update: Thanks to Spike, the order of the first two fonts was wrong. Corrected.

Solution 2

it's not an encoding problem. The issue is plainly seen on this page, which has the correct utf-8 meta tag: http://www.jp41.com/internet-explorer/chinese/.

The problem is that IE8's default font for Chinese is set to nothing!

Here's the fix.

1. Push alt to bring up the file menu.

2. Go to /tools/internet options/fonts/

3. Set the "Language Script" to Chinese Simplified

4. Select the only option - Arial Unicode MS

5. Accept the changes- problem solved.

This oversight affects Chinese Traditional, Korean, Japanese, and probably most other asian languages.

Image if issue being resolved:
http://www.robertpate.net/blog/wp-content/media/ie8-chinese-bug-fullsize.jpg

Solution 3

This sounds like an encoding problem to me. Chinese characters are probably being output using UTF-8 encoding, but the browser is not being told that and is defaulting to another encoding.

Try including this line:

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

That should force the browser into UTF-8 encoding. (This line is included in the site linked in the referenced question: http://www.canadainternational.gc.ca/china-chine/index.aspx?lang=eng, which works fine in my IE8 and defaults to UTF-8.)

Note that the original question states that this is actually a separate issue entirely, involving IE8 relying on installed Windows language packs, while IE7 and earlier did not.

---

Alternatively as a quick-hack fix, you can just use IE conditionals to only present the meta tag to IE8 browsers.

<!--[if IE 8]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<![endif]-->

IE7 should ignore this line, causing it to render normally.

Comments

[Leslie]

Very helpful information, but neither changing to UTF-8 encoding nor using the conditional hack helped. (I don't know why... that seemed like a sure fix!)

[jdmichal]

Are you sure it displays fine in IE7 without the meta tag? Because unless IE is really acting funky, that conditional comment should keep that meta tag from being processed in anything but IE8. You can add an additional HTML display element to ensure that it is not being parsed in other browsers (including IE7) to test.

[alekop]

Strangely, adding a Content-Type meta tag makes things worse! With it all Chinese text appears as boxes. Without it only text in dropdowns apepared that way... the rest of the text was okay.

[Spike Williams]

This is the only thing I could find that worked, although I had to put Arial Unicode MS first in the list to get it to work on my machine - "font-family: Arial Unicode MS, Arial, Helvetica, sans-serif"

[Ryan]

I have no fonts listed under Chinese Simplified.