IEでpreタグの中身がずれてしまう問題の解決方法

問題

Wikiにソースなどを掲載する場合は、インデントやスペースもそのまま表示するためにpreタグが使われるが、IEではガタガタにずれて表示されてしまう。
この現象は、IE 6だけでなく、IE 7でも同様に発生する。
FireFox?などのMozilla系のブラウザでは発生しない。

原因

Wikiに限らずIEで文字コードがUTF-8のページを表示すると、日本語以外の部分が英文フォントで表示される。
そのため、英文フォントのスペースの幅と日本語フォントのスペースの幅が合わなくて、ガタガタに表示されてしまう。
文字コードがShift_JISやEUC_JPの場合は、問題なく表示される。

 

実際に試したところ、行末の文字が日本語の行の、次の行のスペースがおかしくなった。
行末以外に日本語が含まれている場合は問題がない模様。

解決方法

スタイルシートでpreタグのスタイルにfont-familyでフォントを割り当てる。
そうすると、英文も日本語の文も同じフォントで表示されるので表示がずれない。
割り当てるフォントは等幅フォントが良いが、「MS ゴシック」を割り当てた所、特定の文字がめり込んで表示されてしまったので、「sans-serif」などを指定するのが手堅い。

XXX.css.php の preタグのスタイルの定義部分にfont-familyの記述を加える。

pre {
    ...
    font-family: sans-serif;
}

Wiki関連の技術情報に戻る


トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2008-02-05 (火) 15:54:13 (3578d)