Home > Web制作全般 > IE7で○(丸)や×(バツ)などの記号が小さく表示される事象について

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

[読了時間の目安:約 6 分]

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 Pゴシック","MS PGothic",Sans-Serif;
}

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

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

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

雑感

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

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

Comments:3

いちサイト制作者 09-08-05 (水) 11:25

私も同じような現象で困っていて、こちらにたどりつきました
しかし残念ながら当環境(IE7コンポーネントのunDonut+modを使用)では貴ブログの白丸・黒丸・白四角・黒四角ともに小さいままです…

tasc 12-09-02 (日) 23:24

記号で書いた人を区別しているブログをやってます。
ある日急に■と●が小さくなってしまい、
何か解決法はないものかと探していました。

フォントを指定することで、
おかげさまで解決いたしました、ありがとうございました。

hase 12-09-20 (木) 10:54

同じ現象でこちらにたどり着きました。
無事解決です、ありがとうございます!といきたかったのですが、selectタグの中では表示されません。
他の部分ではちゃんと反映されているのですが。。
スタイルシートの方でselect自体にも指定してみましたが、できないのです。
なぜなのでしょう・・

Comment Form
Remember personal info

Trackbacks:3

Trackback URL for this entry
http://blog.btmup.com/web-general/ie7-symbol-small.html/trackback
Listed below are links to weblogs that reference
IE7で○(丸)や×(バツ)などの記号が小さく表示される事象について from btmup Blog
pingback from 丸やバツなどの記号が小さく表示される事象の解決 | Web Design Tips 12-08-28 (火) 16:38

[...] CSS無し:○×△□ CSS有り:○×△□ 参考:http://blog.btmup.com/web-general/ie7-symbol-small.html カテゴリー: wordpress   作成者: envy パーマリンク [...]

pingback from まる 大きな丸 ○ ◯ 直し方 PHP プログラムで|kneading on you – BEBI-CAT 13-04-25 (木) 17:56

[...] 参考はここ [...]

pingback from 「○(マル)」「□(四角)」などの記号や特定の文字だけが小さく表示される原因と対処方法 - キーワードノート 13-06-10 (月) 14:40

[...] btmup Blogさんを参考にさせていただきました、ありがとうございます。 [...]

Home > Web制作全般 > IE7で○(丸)や×(バツ)などの記号が小さく表示される事象について

リンク
フィード
メタ情報

このページのトップへ