IE8 font-size toggles on :hover - Japanese lang only

Question

I have a page that is multi lingual and I have an issue with the Japanese version only.

For some reason in IE8, when I hover over an element, a sibling's font-size will increase/decrease.

Even stranger, is that this doesn't happen on every hover, sometimes I cannot reproduce straight away, I need to keep hovering over different elements in the same area of the page. Eventually this bug will rear its ugly head.

This bug only occurs on the Japanese page, all other languages seem to be fine.

This could be happening on other versions of Internet explorer, I haven't tested on all.

To clarify, I have not got any font-size changes on any :hover rules.

Answer 1

I work for a Japanese site and recently came across this issue. After spending more time than was reasonable, I found the answer from these detailed write-ups in Japanese:

• http://freesoft.tvbok.com/sonota/ie8-fontsize.html
• http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/thread/70d700f4-0bda-48b1-9476-d31993b7cbf4/

The top link includes the ways to deal with it. For those who can't read Japanese I will summarize:

---

The problem only affects IE8 showing pages using the MS P Gothic font (generally the default Japanese font on Windows) at a font-size that is between 9px and 11px. Unlike many IE bugs, it has nothing to do with floats/margins/line-height/etc. As Oldie has pointed out, the bug is not consistent, sometimes it happens right away and sometimes it takes a few hovers, and it seems to enlarge/shrink the text randomly.

The three primary solutions are as follows:

1. Set the font to MS Gothic or some other Japanese font using font-family style.
2. Change the font size to be anything outside the 9px ~ 11px range (Under the default IE8 font settings, 1em sized text will not be affected, but slightly smaller text (eg, 0.8em) will be affected).
3. Force IE8 to display the page as if it was IE7 by adding the following in the header:
   <meta http-equiv="X-UA-Compatible" content="IE=7" />
   

---

I went with #2 because MS Gothic looked jarring next to all the other MS P Gothic text, and felt #3 had clear disadvantages for our site.

It's not an ideal solution, but it works. Best of luck.