IE7で○（丸）や×（バツ）などの記号が小さく表示される事象について

IE7（Internet Explorer 7）で発生する、「一部の記号（○□△×など）が小さく表示される」という事象を解決する方法があったので、メモ的にエントリーしておきます。

結論から言ってしまうと、「UTF-8 でフォント指定をしていないサイトを IE7 で表示した場合」に発生する事象のようなので、その条件をクリアしてやれば良いようです。

以下、詳細。

経緯

僕は自宅でも会社でも MacOSX 環境なので、制作したサイトのクロスチェック以外に IE を使うことはほぼありません。
ただ、お客さんの大部分は Windows ユーザーで、IE7 のユーザーもかなり増えてきているようです（自動更新開始から既に数ヶ月経ってますしね）。

そんなわけで IE7 絡みの問い合わせがチラホラとあるのですが、今回もお客さん経由で初めて知った事象の一つ。
テーブルで組んだ星取り表のようなものを見ると、「○（丸）」や「×（バツ）」が小さくなってしまうというのです。

その案件は、お客さんが別会社に委託して制作していたサイトを、ウチで WordPress に移し替えるというもの。
なので、データ自体は前から使っていたものですし、もちろん特別な設定をしているワケでもありません。
それなのに、既存のサイトではちゃんと大きく表示されているため、「移し替えるだけで何で小さくなるの？」となったワケです。

検証

記号が小さくなる環境

まず、どの環境で事象が発生するか確認しました。

• Windows XP ＆ IE7 → 小さくなる
• Windows XP ＆ IE6 → （問題なし）
• Windows XP ＆ Firefox3 → （問題なし）
• MacOSX ＆ Safari3 → （問題なし）
• MacOSX ＆ Firefox2 → （問題なし）

他にも Opera とかネスケとか Google Chrome とかも調べようかと思いましたが、致命的な欠陥でもないのでとりあえず「Windows ＆ IE7 のみで発生する」として検証を進めました。
Vista についても「XP で出てるんだから出るんだろう」という推測により無視。
（そういや Google Chrome ってまだインストールすらしてない）

既存サイトと新しいサイト（WordPress）との違い

次に、既存サイトと今回の WordPress 環境との違いを考え、いくつか試してみました。

• CSS をすべて解除 → 解決せず
• 「○」や「×」などの記号の文字を、既存サイトからコピペ → 解決せず
• テーブル以外のところに入力してみる（別のいろんなタグでマークアップ） → やっぱり小さくなる

以上から、原因は CSS の設定でもなく、入力した文字自体でもなく、特定のタグでもない、（＝何も書式設定していないプレーンテキストであっても、事象は発生する）ということになります。

あとの違いは文字コードくらいかなぁ……とアタリを付けたところで、「UTF-8」「IE7」「記号」「小さく」といったキーワードでググってみました。

原因と解決法

いろいろキーワードを変えて検索しまくったところ、なかなか時間はかかりましたが以下のような情報が見つかりました。

ユーザー目線はこちら↓
»Internet Explorer 7 で 「○」「●」などの記号文字が小さい -OKWave

制作者目線はこちら↓
»IE7の記号が小さく表示される問題について – sarapapaの日記

結局のところ原因は、

1. 文字コードが UTF-8 のサイトに
2. IE7 でアクセスしたとき、
3. 「○（丸）」や「×（バツ）」などの記号を小さく表示するフォントを勝手に選択してしまう

ということのようです。

なので、解決法としてはその逆で、

1. 文字コードを UTF-8 以外にする
2. IE7 でアクセスできないようにする
3. 表示するフォントを指定する

ということになるワケですね。

WordPress を使っている以上「1」はムリっぽいですし、「2」も現実的ではありません。
消去法でいくと「3」の「フォントを指定する」になるのかなぁ、という感じです。

これまでフォントの指定なんてほとんどしたことがないので、本当はどうにも気持ちが悪くて避けたいところ。
ただ、これしか方法がない以上は仕方ないので、極力影響が少なそうな以下の設定をCSSに追加しました。

body {
	font-family: Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

「Sans-Serif」だけっていうのも一応試しましたが、ダメでした。
やっぱりフォントの名前を指定する必要があるみたいです。

このブログにも同じスタイルを追加しましたが、IE7 の方、ちゃんと見えてますか？
○●◎□■◇◆△▲▽▼×※

以上は制作者側から見た解決法なので、サイトの設定を触れないユーザー側からすると、解決するのは難しいかも知れません。
ユーザー定義の CSS でも作って IE に設定してやれば良いような気はします。

雑感

ちょっと探したらすぐに見つかるだろうと思っていたのですが、意外に情報が無くて時間がかかってしまいました。
あんまり困ってないんでしょうか。それとも泣き寝入り？　諦め？

（制作者）「バグですね。まぁ IE ですからね」
（客）「そうですよね。仕方ないですよね」
っていう会話が成り立つ世の中になったのなら、それはそれで喜ばしいことかもしれない。