2

MyriadProを親に垂直に中央揃えで書いた1行のテキストがあります。ほとんどのブラウザでは正常にレンダリングされますが、IE9＆10ではテキストが正確に中央に配置されておらず、正しい位置から約3ピクセル上にシフトしています。

問題の原因はフォントであることがわかりました。同じケースがArialで正しくレンダリングされます。次の画像で問題を確認できます。テキストの一部が選択されていますが、奇妙な理由でテキストが選択範囲の上部に貼り付けられており、選択範囲が垂直方向に正しく中央に配置されているようです。

問題を揃える

ソース：

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

なぜこれが起こるのか、そしてそれを修正する方法を教えてください。

どうもありがとう。

4

1 に答える 1

0

私はついにAdobeTypekitを使用して問題を解決しました。Typekitで作成されたMyriadProは、垂直方向の中央に正しく配置されています。

しかし、なぜこれが起こるのか、私はまだ疑問に思っています。

于 2013-03-24T18:00:05.037 に答える