btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

Web制作全般

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

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

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

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

雑感

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

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







-Web制作全般
-, , , , , ,

執筆者:


  1. いちサイト制作者 より:

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

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

  3. tasc より:

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

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

  4. hase より:

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

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Cyberduck でファイル名やディレクトリ名が文字化けしたときの対処法。

Mac 用の FTP ソフトとして代表的な「Cyberduck」。 無料で使えて機能も豊富なので、とても重宝しています。 いきなり動作が重くなったり頻繁に落ちたりしたりするのが玉にキズなんですが。 ( …

no image

ファーストサーバでCGIが「505 Internal Server Error」になる問題。

久々、ファーストサーバネタです。 まぁ別にファーストサーバが悪い訳ではないんですし、ここに限った話でもないんですけど、なぜか色々ややこしいことになることが多いもんで。 今回は CGI の設置方法につい …

no image

.htaccessで「Redirect permanent」が使えない場合に「RewriteRule」を使ってリダイレクトする方法。

.htaccess でリダイレクトする場合、一般的に使うのはこんな↓書式だと思います。 Redirect permanent /old/ http://www.btmup.com/new/ 「/old …

no image

Firefox で特定のページの特定の箇所から特定のページにリンクしたとき「一部だけ暗号化されていない」という状態になる

何かよく分からない事象にハマってます。 もし原因や解決法などをご存知の方が居ればぜひ情報を……。 同一ドメインにおいて(仮に「http://www.hoge.jp/」とします) Firefox で保護 …

no image

Mac版「Google Chrome」のスクリーンショットが初公開

»「Chrome」Mac版、初のスクリーンショットが公開 – ITmedia エンタープライズ いやぁ、楽しみですなぁ。 というか、Windows 版が出てからもう5ヶ月も経っ …