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

我用Myriad Pro編寫的一行文本垂直居中居於父母。在大多數瀏覽器中，它呈現良好，但是在IE9中，文本並不是完全居中，而是從其正確的位置向上移動了大約3個像素。Myriad Pro在IE9和IE10中的垂直居中

我發現問題是由字體造成的，同一個案例用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>

能否請您解釋一下我爲什麼出現這種情況，如何解決？

非常感謝。

來源

2013-03-21 amik

你是否有這樣的小提琴，這樣就可以重現你的問題，並與它一起玩？ – FelipeAls 2013-03-21 21:53:45

ofc，對不起，補充。 – amik 2013-03-21 22:02:30

我終於用Adobe Typekit解決了這個問題。用Typekit編寫的Myriad Pro正確地垂直居中。

但我仍然想知道爲什麼會發生這種情況。

來源

2013-03-24 18:00:05 amik

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

回答

相關問題