Making text align equally in both IE and Chrome

Question

<style type="text/css">

h2{

font-size:13px;
line-height:16px;
color:#000000;
margin:0;
padding:6px 22px;
font-family: 'Times New Roman';
}

div{
border:1px solid black;
}

</style>

<div>
<h2>
様々なツールを使</h2>
</div>

Pasting the above codes here: http://htmledit.squarefree.com/ You will see that the text stays a little bit higher in the div in IE than in Chrome, I would like to make them consistent.

By adding a   after the text within the <h2>in IE, the text will automatically move up, which is consistent with Chrome. But I don't quite like this hack, so I would like to know if anybody knows what problem this is and recommends a better way to fix it if possible.

Many thanks to you all.

Note: this problem does not appear if the text is english only.

Answer 1

What version of IE are you using? It looks pretty similar in IE8 to me.

Answer 2

I've checked with Chrome, IE7 & IE8, and they all look the same (I even removed the margin to the body, just to be sure, and changed between the different Windows).

What versions of IE & Chrome are you using? Are you sure that both browsers are using the same font to show the text? (They might have a different default font for asian symbols configured for some reason, which will be used if your Times New Roman font doesn't include those characters).

The way you have font antialiasing configured in the OS can also affect the flow and layout of the text (at least in XP, IE uses always ClearType, no matter what you have configured in Windows).