8

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.

Makoto
  • 104,088
  • 27
  • 192
  • 230
Oldie
  • 109
  • 7
  • I don't know much about IE or hover rules, but many browsers allow you to define a default font in the browser settings, and _a different_ default font for Asian languages. Perhaps your Asian default font is larger than the Western default one? – jogojapan Feb 23 '12 at 00:30
  • Post some code or a link to your site so we can take a look. – Andres I Perez Mar 20 '12 at 13:32
  • Wait a minute. At home I'll fetch my crystal ball and tell you the future :) – yunzen Mar 20 '12 at 16:51
  • 1
    @dhinesh--you posted a bounty, but there is still not enough information here to give an answer. Code is needed, or a jsfiddle reproducing the problem. Oldie has not supplied either. – ScottS Mar 20 '12 at 17:15
  • man check this: set line-height OR direction OR try change font-family – Abudayah Mar 20 '12 at 22:16
  • @Oldie I don't know really. You don't seem to be very interested in getting an answer to this. We cannot help yoou out on this one, *if you don't give us more information*. For starter you could send a link to the page you have. – yunzen Mar 21 '12 at 15:27
  • Not enough information to address the problem. We need a reproducible example. – Matthew Darnell Mar 21 '12 at 21:12
  • Apologies, I hadn't set up email alerts, so had not seen all the comments etc. – Oldie May 24 '12 at 15:19

1 Answers1

16

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:

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.

Manmaru
  • 578
  • 3
  • 8
  • @Manmaru: Thanks for this valuable information, will try this out and let you know. The font-size of button is 10px or 11px, for which this problem arises. – dhinesh Mar 26 '12 at 12:44
  • @ManMaru: Issue solved, Awarded the bounty! Used #2 approach. I would have given 100 up votes, however it is not allowed. Thanks a ton. – dhinesh Mar 26 '12 at 14:47
  • @ManMaru, thanks for the detail answer. After doing some digging around myself, I came across an article that suggested the same fix. I then passed on this information to the relevant team and the bug hasn't been mentioned to be again. So I presume it has been resolved. – Oldie May 24 '12 at 15:21
  • YOU ARE A LIFE SAVER! This worked for me also! Also, going with #2! – Solomon Closson Sep 11 '13 at 19:55