小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


文字コードを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:ヒラギノとMS Pゴシックとメイリオの悩ましい関係 - webデザイナーのナナメガキ

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

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

ボタンのラベルが浮く

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>
  チェック1<input type="checkbox" name="" value="hoge" checked>
  チェック2<input type="checkbox" name="" value="hoge"><br>
  ラジオ1<input type="radio" name="hoge" value="hoge" checked>
  ラジオ2<input type="radio" name="hoge" value="hoge"><br>
  <input type="button" name="" value="SEARCH"><input type="button" name="" value="キャンセル"><br>
  </fieldset>
  </form>
</body>
</html>
Shift_JISのページ


UTF-8のページ

上記の画面から、フォントサイズだけでなく、フォームの幅なども変更されていることがわかります。悩ましいのが、これがIEの仕様なのか、バグなのか、Microsoftからの公式見解がないことです。
したがって、WEBページの製作者サイドで、これら表示上の微妙な違いを吸収する必要がありそうです。