(cache) 文字コードをShift_JISからUTF-8に変更した場合のInternet Explorer（IE）での表示問題

Webページの文字コードをShift_JISからUTF-8に変更した場合、IEでは表示が微妙に変わってしまうようです。具体的には、英字フォントが変わってしまう、フォントサイズが大きくなってしまうなど、さまざまな現象が発生します。「IE、UTF-8、フォント」などのキーワードで検索すると、これらについてたくさん情報を見つけることができます。

英字フォントがTimes New Romanになる

font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だと WindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。

CSSのfont-family：ヒラギノとＭＳＰゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ

フォントサイズが微妙に大きくなる

%で指定された font-size は，最終的にpxに変換され，端数処理して整数値になったものが表示されます。IEの場合，11.5px以上12px未満になるところは，本来12pxで表示されるはずですが，13pxになっています。9.5px以上11.5px未満のところは，すべて12pxで表示されています。

IEで指定どおりのfont-sizeにならない | d-spica

ボタンのラベルが浮く

UTF-8でかかれたソースを、IEで見ていて気づいた。

FORMのSUBMITボタンの文字が若干浮いている。(上側、画像の一番左。)また、アルファベットを使用するとうまくセンタリングされるようだ。（グーグルとgoogleの違い）

UTF-8 での FORM ボタンの文字が浮く（IE） : 自宅運用debianサーバのTIPS+α

自分の環境(IE7)でも、実際に試してみました。

ソースコード

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
  <h1>サンプルフォーム</h1>
  <p>UTF-8とShift_JISでの表示を比較するためのサンプルです。</p>
  <form action="hoge" method="get">
  <fieldset>
  <legend>sample form</legend>
  <input type="text" name="" value="hoge" size="20">
  <br>
  <textarea name="" rows="2" cols="20" tabindex="0">hoge</textarea><br>
  <select name="hoge" size="1" tabindex="0">
  <option value="">hoge</option>
  </select><br>
  チェック１<input type="checkbox" name="" value="hoge" checked>
  チェック２<input type="checkbox" name="" value="hoge"><br>
  ラジオ１<input type="radio" name="hoge" value="hoge" checked>
  ラジオ２<input type="radio" name="hoge" value="hoge"><br>
  <input type="button" name="" value="SEARCH"><input type="button" name="" value="キャンセル"><br>
  </fieldset>
  </form>
</body>
</html>