2

I've a single line of text written with Myriad Pro vertically centered to parent. In most browsers it renders fine, however in IE9&10 the text is not exactly centered, it shifted up by about 3 pixels from its correct position.

I've found out that the problem is caused by the font, the same case is rendered correctly with Arial. On the following image you can see the problem. Part of the text is selected and it seems that the text is sticked to the top of the selection for some weird reason and the selection is vertically centered correctly.

align problem

Source:

<!DOCTYPE html>
<html>    
    <head>
      <style type="text/css">
        div
          {
            vertical-align:middle;
            height:40px;
            line-height:40px;
            background-color:red;
            font-family:"Myriad pro",arial;
          }
      </style>
    </head>    
    <body>
        <div>LOREM IPSUM</div>
    </body>
</html>

Can you please explain me why this happens and how to fix it?

Thanks a lot.

4

1 回答 1

0

我终于使用 Adob​​e Typekit 解决了这个问题。用 Typekit 编写的 Myriad Pro 正确垂直居中。

但我仍然想知道为什么会这样。

于 2013-03-24T18:00:05.037 回答