Japanese characters are not displaying correctly in IE 8...not sure about earlier versions
The URLs exhibiting this behavior is here:
http://culturewithinaculture.org/introduction.php
http://culturewithinaculture.org/about.phpThe site has not been launched officially. But my problem is on the right side, Japanese copy. I have my document type set to UTF-8 which is what I thought it should be. On Firefox, and Safari I have no problems at all...shows up fine. In IE 8 however it is square boxes and illegal characters. The funny thing is that if you click on the 'compatibility mode' button it refreshes the page and all is fine. However, that has had mixed results too, a friend of mine tried it on their XP machine with IE 8 and the compatibility mode did not work (still had square boxes for unrecognized characters).
I want this to be cross browser capable, and I don't want to force an IE person to click on a 'compatibility mode' button or a开发者_如何学运维nything like that. I know I could just make the Japanese copy a large image, but I'd like to have the text selectable and HTML if possible.
Have any of you experienced this issue? Is there some special IE only CSS or jQuery magic I can use to force proper text display? Perhaps a font-face trick?
All help is greatly appreciated!
Here are your response headers:
Date: Thu, 08 Jul 2010 22:52:12 GMT Server: Apache/2.0.54 X-Powered-By: PHP/4.4.8 Vary: Accept-Encoding Content-Encoding: gzip Content-Length: 5319 Keep-Alive: timeout=5, max=88 Connection: Keep-Alive Content-Type: text/html
Note that the Content-Type header is missing the charset attribute and the webbrowser is thus forced to use platform default encoding which is often ISO-8859-1. FireFox is actually smart enough to autodetect the correct encoding and apply it instead (you can check it by View > Character Encoding).
Since those pages seem to be PHP generated, best what you can do is to add the following to the top of your PHP pages (or header-include, if any), before any character is been emitted to the response body:
header('Content-Type: text/html; charset=UTF-8');
See also:
- PHP UTF-8 Cheatsheet
If you are using Windows XP, Check "East Asian Language" support.
I had a similar problem, it turned out to be a problem with IE8 default's settings. If you go to Tools -> Internet Options -> Fonts and select Japanese from the dropdown, you'll see that there is no default font selected for that language (and several others). Just select a font and you're all set. Brilliant move from the IE team, right?
Well after a ton of reading, and testing, the ONLY way I have been able to get this to work is by adding the following code.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
To my knowledge this forces IE 8 to use compatibility mode. It works for both links I included above. I'd love to know of a way to correct this without forcing this 'mode', but for now it works and I'm happy with it.
Thanks for all the suggestions.
I often use almost exactly the same header as the page you linked to (see caveat below) to serve my Japanese pages without the IE=EmulateIE7 and I've not had the issues you're describing on IE8. I've pasted this in from my own page to confirm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
What I'm saying then, is there's no way this HTML is causing any issues of it's own - except for the one tiny difference - I would change your HTML to include the meta tag as the first item in the head section ie above the title.
I have had 2 other similar troubles and incase the above doesn't help, they were:
The encoding of the file actually holding those characters: utf8 or utf8y - the latter causing various problems, usually just with IE - this may only affect statically served pages like mine though
Apache server's configuration had the AddDefaultCharset property set to ON. To fix this required an email request to my host provider
From the Apache docs:
AddDefaultCharset: This directive specifies the name of the character set that will be added to any response that does not have any parameter on the content type in the HTTP headers. This will override any character set specified in the body of the document via a META tag. A setting of AddDefaultCharset Off disables this functionality. AddDefaultCharset On enables Apache's internal default charset of iso-8859-1 as required by the directive.
Your meta tag is as follows.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Another site's one
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
Of course, any browser should handle both correctly. But please try it.
I've been fighting the same issue but magnified where I need to display many different languages on the same page. Here is what I have learned so far...
This is really a font issue. The font being used does not contain the foreign characters needed so you see broken characters. Most browsers are smart enough to swap out the font with a unicode version that contains the needed characters, but they left that feature out of IE8.
The IE=EmulateIE7 Solution
I cringed at the idea of forcing IE8 to behave as IE7 and in doing so trading one solution for a list of other problems. After some digging and a bit of testing I learned that not even this is a complete solution because IE7 users who do not have a font that supports East Asian Languages installed will also see broken characters. (In my tests using 'Arial' as my font on a fresh install of XP with IE7 this was the case.)
So why does forcing IE8 into IE7 mode work for some? From what I gather, when MS Office is installed it comes with 'Arial Unicode MS' which contains East Asian Characters and so works as a fallback. After installing 'Arial Unicode MS' on my XP IE7 install, the characters showed fine. And after forcing my site to behave as IE7 the characters showed fine in IE8 too. Still, this basically turns IE8 into IE7 and who wants that?
Side Note: I experimented with wrapping the X-UA-Compatible meta in a conditional comment to avoid IE9 from also behaving as IE7, but doing that triggered the compatibility button to display which I also wanted to avoid.
My Solution
Not sure there is a silver bullet to this problem, but what I came up was...
If we define 'Arial' as the font-family and a user has 'Arial Unicode MS' installed their browser should swap out the font as needed in all browsers except IE8. Since IE8 isn't smart enough to do the swap automatically, we can pass the font in ourselves via an IE8 specific class...
Add conditional comments to target IE8...
<!--[if IE]><![endif]-->
<!doctype html>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html><!--<![endif]-->
Then in our CSS we can add...
BODY {font-family:Arial, Verdana, Helvetica}
.ie8 BODY {font-family:'Arial Unicode MS', Arial, Verdana, Helvetica}
This will fix the issue providing the user has 'Arial Unicode MS' installed. To ensure support we could optionally load 'Arial Unicode MS' by including it with @font-face {}, but 'Arial Unicode MS' is 22MB so not sure that is advisable. For my purposes, I'm considering offering a 'Having troubles seeing this?' link that will instruct users how to download and install 'Arial Unicode MS'.
This worked for me:
Disable Asian languages support (Control Panel | Regional and Language Options | Languages -- uncheck 'Install Files for East Asian languages'); reboot; then re-enable by re-checking the same box; and reboot. Voila!
Win XP install disc will be required for the re-enable of Asian language support.
加载中,请稍侯......
精彩评论