Vertically Aligning Japanese characters in IE8

I'm having some problem align开发者_开发问答ing Japanese characters in IE8 on a website I am making.

I have something like <span>Label</span><span>Some value</span>. When both "Label" and "Some value" are either in Japanese or English, they align fine, but when they are mixed ("Label" is always Japanese, but "Some value" might not be) then the alignment is off. Example in the image below:

Surprise, surprise, it all works fine in othe browsers, same image from Chrome for example:

I can't figure out how to fix this. Has anybody come across this before or know a workaround for it? My company is still mostly using IE7, so some trick that would work on that would be most useful.

EDIT 1: I forgot to add the css I am using at the moment. For the label I have:

display: inline-block;
color: Gray;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

For the values I am using something similar:

display: inline-block;
margin: 0x 0px 0px 0px;
padding: 0px 0px 0px 0px;
vertical-align: text-top;

/*For IE7*/
zoom: 1;
*display: inline;

EDIT 2: I'm sure this is related to this problem. I have input boxes in my form, which are perfectly aligned until I type in some Japanese characters. No problem at all for roman characters again. See below:

Again, no problem whatsoever in other browsers...

EDIT 3:

Had a look at this again today (Over a year after I asked this question...). In IE9, the characters display just like in Chrome and other browsers, basically roman and Japanese words all line up properly. I checked it out using IETester and for the same page, the Japanese fonts are aligned "higher" in IE8 than IE9.

In IE8:

In IE9:

I didn't get to check this out at the time because I didn't have IE9. The fonts look identical, so it must be an IE issue and there is nothing that can be done about it I guess?

Make sure you are also assigning a vertical-align for the text boxes.

http://jsfiddle.net/HkrJH/

As far as the trouble with spans, I can't repro that. What font are you using? Can you post a jsfiddle that demonstrates the issue?

internet explorer is horrible.

target your browser and add a stylesheet.

Example in the head:

<!--[if IE 6]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

<!--[if IE 7]><link rel="stylesheet" href="http://mysite.com/path/to/ie7.css" type="text/css" media="screen, projection"><![endif]-->

You can place the following HTML tag in the HEAD element of your web page:

<meta http-equiv=“X-UA-Compatible” content=“IE=7” />

I believe this might be a problem with the default fonts used for Japanese vs. English. English characters contain more whitespace than Japanese, because English has to accomodate characters like "c" (square), "t" (taller) and "g" (deeper), while all characters are square boxes in Japanese. So if you use the same pixel size of characters, English ones can still look off from Japanese ones, depending on the font used for either language (likely not the same, or not aligning even if it's the same). If you use vertical-align: middle; you should get a better result.