IE8でWebサイトを見るとフォントサイズが変化する

Question

IE8の「互換表示」機能を使用しない状態で、Webサイトのテキストにマウスオーバーすると、フォントサイズがピクピク変化します。

OS:　Windows Vista
Browser: IE8.0/標準モード
Location: Japan

1.Webサイトのつくり手側の回避方法として、次のリンクで紹介されている以外の方法はあるのでしょうか？

msdn:META タグと将来の互換性のロック
http://msdn.microsoft.com/ja-jp/library/cc817574.aspx

2.また、フォントサイズがピクピク変化しないフォントの記述の方法はあるのでしょうか？

自分で調べましたが、結局わかりませんでした。よろしくお願い致します。

Answer 1

再現可能な最小サンプルのHTML/CSSの提示をお願いしまっす！

適当なSPANに
.abc{ font-size: 12px; }
.abc:hover{ font-size: 20px; }
しただけでは再現しませんでした。

Answer 2

（´・ω・｀）さん、返信ありがとうございます。

再現可能な最小サンプルのHTML/CSSの提示をお願いしまっす！

正確には、「(常に)変化する」のではなく、「変化することがある」です。それに加え、原因がどこにあるかわからないので、最小サンプルをつくることはできませんでした。
参考までに、次が私の見つけた同じ症状と思われるサイトへのリンクです。IE8の「互換表示」機能を使用しない状態で、テキストやリンクにマウスオーバーしてご覧になってください。

・ http://ja.wikipedia.org/wiki/Internet_Explorer
　：左側にあるメニューの「案内」「ヘルプ」のリンク部分

・ http://social.technet.microsoft.com/Forums/ja-JP/internetexplorerja/threads
　：「choco_id 16 時間 21 分前
　　最新の返信 （´・ω・｀） 11 時間 27 分前 」の時刻部分

・ http://blogs.technet.com/shinhara/
　：ヘッダにある「私の周りで動いている.....情報を取り上げています。」のテキスト部分

■ 補足
症状の詳細
・ 最初は記述したフォントサイズになるのですが、あるテキストにマウスオーバーすると1～2px程度大きくなり、また元のサイズに戻ったり戻らなかったり
　例）「font-size: 85%;」(11px)と記述したのが、マウスオーバー後、目測「font-size: 100%;」(13px)程度に変化する

・ アルファベット部分のフォントサイズは変化せず、日本語部分だけが変化しているように思います

以上、よろしくお願いします。

Answer 3

再現しました(｀・ω・´)。XP&IE8&メイリオなし。

以下のサイトと同様の現象のようですね。対応策もかなり調べてあるようです。
http://freesoft.tvbok.com/sonota/ie8-fontsize.html

上記にある発生条件を書いておくと、
・IE8
・標準モード
・10.5-11px辺り（多分%指定含むフォントサイズの最終的な計算結果が）
・font-familyとしてMS系フォントの指定なし

条件をもっと絞れると回避手段も多くなるのですが、どうでしょう。
中国、韓国、日本語でしょうかね。影響が出ているのは。

（mouseover/out毎に画面全体の再描画をするようにすると再現しなくなる。
　たとえ、ピクって文字が大きくなってもboxの枠のサイズは大きくならず、文字が途切れる）

Answer 4

（´・ω・｀）さん、返信が少し遅くなってしまいました。
わざわざ調べて頂きありがとうございます。参考になりました。


一応、質問する前にそのページにさっと目を通しました。やはり、サイト運営者の対策としては次のようにするが有効なのですね。

• font-sizeに10.5～11px(%指定含む計算結果)は指定しない
• font-familyにMS系フォントの指定する

私の方で実験したのですが、
「font-family:Helvetica, Arial, sans-serif;」だと見た目のフォントサイズが変化し、
「font-family:'ＭＳ Ｐゴシック',sans-serif;」だとフォントサイズは変化しませんでした。

「font-family:Helvetica, Arial, sans-serif;」でも見た目のフォントサイズが変化しない記述方法があれば教えていただけませんか？

因みに、次が実験したサンプルです。

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
}
.sample {
font-size: npx;
}

実験結果
※ n に次の数字を当てはめる。

font-size: 8 px;　  /* 変化なし */
font-size: 9 px;　  /* 変化あり */
font-size:10 px; 　/* 変化あり */
font-size:11 px; 　/* 変化あり */
font-size:12 px; 　/* 変化なし */


＞条件をもっと絞れると回避手段も多くなるのですが、どうでしょう。
＞中国、韓国、日本語でしょうかね。影響が出ているのは。

影響が出ている言語は、今私が確認できている限り、中国語、朝鮮語、日本語だけです。実際に、「W3C CSS 検証サービス」のトップメニューにある言語のリンク部分で確認しました。
http://jigsaw.w3.org/css-validator/

Answer 5

あんまり良い案は思いついていないのですが、やったことを書いておきます。

【再現条件の調査】
①再現するHTMLから少しずつ不要な個所を削除
していったのですが、削除のたびに少しずつ再現しなくなり、
そのうち再現しなくなりました。
ピクピクする個所から見て、祖先でも子孫でも兄弟でもない要素だったんですが。

あと、こちらでは
範囲選択時に出てくるアクセレータの青い矢印上にマウスを乗せると小さくなる事が多いですね。
逆に、クリックやマウスオーバーさせると大きくなる事が多かったです。

②gdi++.dll
を使ってみたのですが、動作は変わらず、再現しました。
内部で何倍かしてレンダリング後に縮小してくれるので影響するかもと思ったんですが、
関係ありませんでした＞＜


【へぼい対処案】
①IE内部の”部分”再描画→”全体”再描画にする

function f(){
 document.body.style.display = "none";
 document.body.style.display = "";
}
document.attachEvent("onmousemove", f); //onselectionchangeの方がよいかも。
document.attachEvent("onmouseover", f);
document.attachEvent("onmouseout", f);
window.attachEvent("onload", f);

上記コードを入れることで、基本的には再現しなくなりました。マシンによっては重杉るかもです。

②zoom指定してみる
font-size: 22pxにして-ms-zoom:0.5にすることで現象が低減しました。
ピクピクする単位がセンテンス単位(一定範囲の文章全体)ではなく、
単語単位に変化しましたが、元の画面レイアウトも変わってしまいます。

【その他】
CSS Validatorのページや他のページも同じなのですが、
「ブラウザモード」をわざわざ「Internet Explorer 8互換表示」から「Internet Explorer8」に変更している人じゃないと
色々なサイトでピクピクして困るという事態は発生しないと思いました。

font-size: 8 px;　  /* 変化なし */
font-size: 9 px;　  /* 変化あり */
font-size:10 px; 　/* 変化あり */
font-size:11 px; 　/* 変化あり */
font-size:12 px; 　/* 変化なし */

すばらしいですね。
ちょうど9.5px、10.5pxと端数があるサイズの周辺で発生していますね。
事象を再現するためには、ご指定のCSSに加えて
一定の複雑度を持ったHTMLである必要があるという認識です（上に書いた調査結果から）。

【フォントについて】
「font-family:Helvetica, Arial, sans-serif;」時に使用される日本語フォントは、
「インターネットオプション」の「Webページフォント」ですかね(デフォルトMS Pゴシック)。
だとしたら「font-family:'ＭＳ Ｐゴシック',sans-serif;」と明示的に指定したら再現しない理由は、
IEのフォント選択の”迷い”を断ち切ったからでしょうか。
ビットマップフォントだとかアウトラインフォントだとかいう話は今回の事象とは関係なさそうですね。

Answer 6

（´・ω・｀）さん、たくさん実験して頂き、本当にありがとうございます。
私の知らないこともあり勉強になりました。

事象を再現するためには、ご指定のCSSに加えて
一定の複雑度を持ったHTMLである必要があるという認識です（上に書いた調査結果から）。

そう言われてみて、私もそのように思いました。
「一定の複雑度を持ったHTML」がどうゆうHTMLかがわかればよいのですがね。

「font-family:Helvetica, Arial, sans-serif;」時に使用される日本語フォントは、
「インターネットオプション」の「Webページフォント」ですかね(デフォルトMS Pゴシック)。
だとしたら「font-family:'ＭＳ Ｐゴシック',sans-serif;」と明示的に指定したら再現しない理由は、
IEのフォント選択の”迷い”を断ち切ったからでしょうか。

IE8の「Webページフォント」は、MS Pゴシックでした。
ブラウザのフォントも関係している可能性があるのですね。ブラウザのフォントは気にも止めていませんでした。


■私の最終的な解決策
「font-family:Helvetica, Arial, sans-serif;」では、ピクピク変化する可能性のあるfont-sizeは使用しないことにしました。


■最後に
（´・ω・｀）さんの有用なコメントに助けられました。ありがとうございました。