IEで「游ゴシック/游明朝」を表示させると、文字の下側に由来不明の余白が生じる

Webサイト側がフォントとして「游ゴシック/游明朝」を指定している場合と

IE(11)側でWebサイトのCSSで指定されているフォントを使用せず

「游ゴシック/湯明朝」を指定している場合のどちらでも確認しているのですが

文字の下側に由来不明の空白が生じています。




IEの「開発者ツール」エミュレーションで「ドキュメントモード」を

「10」や「9」へと変更してもこの状態は変わらないので

11に限定したものではないようです。


3台のPCで使用しているIE11のいずれでも確認できたので

他の方のPCでご使用のIE11(もしくはそれ以前のIE)でも再現できると思います。

※ Windows 8.1のIE11(PC1)● Windows 8.1のIE11(PC2)● Windows 7のIE11(PC3)

 これらの異なる3台のPCを使って確認しました。


例えるなら

CSSでline-heightを1.5程度に指定したとき

本来ならばフォントサイズのhieght分を指し引いた「残りの値」が

文字の上下に分配されると思いますが

この「残りの値」が上下には分配されず

下側にだけ集まってしまったような不自然な空白という印象です。

※CSSでline-heightをそのように指定しているわけではありません。

 実際にline-heightを設けて値をどう変更しようが

 この下側に出現する由来不明の余白は無くなりません。


以下に貼り付けたスクリーンショットのように

Webページ上の文字列をマウスドラッグして反転選択すると判りやすいのですが、

文字を選択反転した領域が下側へと不自然に広がっているのが見てとれるかと思います。


〔例〕


判りやすいようにh1要素の一番下の行だけ選択して反転して画像を加工してありますが

すべての行に(h1以外の場所もすべて)「} ?」で示したような余白が文字の下側に生まれています。


同じページやサイトをChrome/WebkitやFirefoxで表示しても

このようなレンダリング結果にはなりません。

わたしが確認できた範囲では、IEでのみ起きています。


また、いくつかのWebサイトをIE11にて

フォント指定「游ゴシック/游明朝」で表示させてみましたが

どのページでも同じ現象が起きました。


この現象に関連して起きていると思われることがもう1つあって

ブロック要素内に対して上下に同じ高さの空白が表示されるよう

{padding:10px}といった指定を施してあったとしても

ブロック要素内にある文字行がpadding-top領域へとずれ込んでレンダリングされてしまうため

IEで表示させるとCSSの指定通りになりません。

※上のスクリーンショットで

 「padding-top領域へと文字行がずれ込んでいる」ものとしてよく判るのが

 h1見出し内の「…産経新聞破る…」のあたりです。

 文字の上側が見えなくなってしまっています。


<h*>見出しのようなブロック要素に対して

background-colorやborderをpaddingを組み合わせていない文章では

一見しただけはこのような空白が生じているようには見えないため

問題になるケースはあまり多くないかもしれませんが

他のブラウザでは「游ゴシック/游明朝」を用いても

このような空白は生まれないため

「游ゴシック/游明朝」に起因する問題なのか

IE系に起因する問題なの判りかねています。


以下は上記「MSNニュース」のh1要素(ニュース記事のタイトル部)を

IE11のDOM Explorerで表示させたものです。




このように、文字列の下部に問題の空白が生まれるような記述は

わたしが見る限り、見当たりません。


MSNニュースの記事であれば、どの記事でもこのスタイルが指定されているものと思います。


MSNニュースに限らず「游ゴシック/游明朝」で表示させた(わたしが確認した中では)

すべてのサイトでこのようなレンダリング結果になるため、

MSNニュースのCSSやDOM Explorerの内容を貼り付けているのは、あくまで一例としてです。


 

 

 

 

「WindowsにしてもMac OS Xにしても

 限られたOSにしか搭載されていないフォントなのだから

 游ゴシック/游明朝を使わなければいい」

これがもっとも簡単で手っ取り早い解決方法なのだとは思います。


ですが、何故このような由来不明の空白が文字の下部に生じてしまうのか

ご存知の方が居られましたら解明にご協力頂ければと思う次第です。

 

 

※モデレーター注 
著作権保護の観点により、画像の一部を編集させていただきました

 

 

質問情報


最終更新日 2019年6月11日 表示 12,343 適用先:

以下のようなサンプルを各ブラウザーで表示させてみました。

----------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>Test Case</title>
    <style>
    body {font-family: "yu gothic", meiryo}
    </style>

</head>

<body>
<article>
    <header>
        <h1>Test Case</h1>
    </header>

    <div id="content">
        <p>
        あいうえおかきくけこ<br>
        吾亜蛙吾亜蛙吾亜蛙
        </p>
    </div>

    <footer>
        <p>(C) 2014 CPS Corp.</p>
    </footer>

</article>
</body>
</html>

----------------------------------------------------------------

結果、以下のような表示になり、游ゴシックが利用されている IE と Firefox で有意な差が無いように見えます。(Windows 8.1 / IE11)



(Chrome と Opera は游ゴシックではなくメイリオで表示されてしまうようですが...)


上例のような簡単なサンプルで現象の再現が確認できる HTML / CSS を提示されるとよいかと思います。

また MSDN フォーラムの方が向いているかもしれません。

(http://social.msdn.microsoft.com/Forums/ja-JP/home?category=internetexplorer)




この回答で問題は解決しましたか?

役に立ちませんでした。

回答としてマークしていただきありがとうございます。

この返信の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。今後のサイト改善に役立てて参ります。

この回答の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。

お時間を割いて戴き、ありがとうございます。


こちらでも検証用のhtmlを用意してみました。

---------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
     <meta charset="utf-8" />
     <title>游フォントの描画検証</title>
     <style>
          body {
                    font-size: 16px;
                    }

          .latest {
                    font-family: '游ゴシック', 'Yu Gothic', sans-serif;
                    border: 1px solid #0099ff;
                    padding: 5px;
                    }
          .latest-fill {
                    font-family: '游ゴシック', 'Yu Gothic', sans-serif;
                    color: #ffffff;
                    background: #0099ff;
                    padding: 5px;
                    }

          .one-gen-ago {
                    font-family: 'メイリオ', 'Meiryo', sans-serif;
                    border: 1px solid #0099ff;
                    padding: 5px;
                    }
          .one-gen-ago-fill {
                    font-family: 'メイリオ', 'Meiryo', sans-serif;
                    color: #ffffff;
                    background: #0099ff;
                    padding: 5px;
                    }
     </style>
</head>

<body>
     <header>
          <h1>游フォントの描画検証</h1>
     </header>

     <article>
          <p class="latest">アメンボ赤いなあいうえお</p>
          <p class="one-gen-ago">アメンボ赤いなあいうえお</p>
          <p class="latest-fill">アメンボ赤いなあいうえお</p>
          <p class="one-gen-ago-fill">アメンボ赤いなあいうえお</p>
     </article>

     <footer>
          <p></p>
     </footer>
</body>
</html>

---------------------------------------------------------------------------------------------------------


これを各ブラウザでレンダリングさせたものが




このような感じです。

※余白の所在が分かりやすいように

 borderで囲んだ游ゴシック文字行の一部を選択反転させてあります。


FirefoxやBlink/Webkitでは問題ないのですが、

ご覧のように、IEでは游ゴシック部の下側に由来不明の空白が生まれてしまっており

外側のブロック要素でpaddingを設定している場合に

なんだか不格好になっている(CSSの指定通りになっていない)ことが見て取れるかと思います。

今回お尋ねしたのは、この点についてです。


こちらのMSコミュニティで解明に至る気配がないようであれば

教えて頂いた「MSDNフォーラム」にも投稿してみたいと思います。


Hebikuzureさん、ありがとうございました。

この回答で問題は解決しましたか?

役に立ちませんでした。

回答としてマークしていただきありがとうございます。

この返信の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。今後のサイト改善に役立てて参ります。

この回答の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。

僕も同じく困っています。

下記の表示をIE11で見てみると、

---------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<style>
h2{
background: #AEB0B0;
font: 60px/1em "游明朝", YuMincho;}
p{
background: #AEB0B0;
font: 14px/1em "游明朝", YuMincho;}
</style>
</head>

<body>
<h2>経営理念</h2>
<p>経営理念</p>
</body>
</html>

---------------------------------------------------------------------------------------------

文字だけが上にずれて表示されるんです。

line-heightの設定を外すと、AKiiWiiさんと同じく、下に余白が入ったような状態で表示されます。

僕の予想ですが、これは「下に余白が入っている」のではなく、「文字だけが上にずれている」のだと思います。

選択すると、文字と余白が両方選択されるので、余白が入っているように見えるのではないでしょうか?

この回答で問題は解決しましたか?

役に立ちませんでした。

回答としてマークしていただきありがとうございます。

この返信の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。今後のサイト改善に役立てて参ります。

この回答の満足度をお教えください。

フィードバックをお送りいただきありがとうございます。