Question

我用Myriad Pro写的一行文字垂直居中于父母。在大多数浏览器中它渲染得很好，但是在IE9和10中，文本并不完全居中，它从正确的位置向上移动了大约3个像素。

我发现问题是由字体引起的，同样的情况是用Arial正确呈现的。在下图中，您可以看到问题。部分文本被选中由于一些奇怪的原因，文本似乎粘在选择的顶部，并且选择是垂直居中的。

align problem

来源：

<!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>

你能解释一下为什么会发生这种情况以及如何解决这个问题吗？

非常感谢。

Answer 1

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

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

在IE9和IE10中Myriad Pro的垂直居中

1 个答案: