IE 8の気になるバグ3つ

公開：2009年08月03日 22:30
更新：2011年05月18日 14:25

自分用のまとめ。ずっと気になっているものだけ。
細かいところとかは色々あるんだろうけど、今のところはそんなに気にならないので放置。
発生するのはIE 8の標準モードのときのもの。

文字の大きさが勝手に変わる……というかピクピク動く

こちらのエントリーによると

IE 8を使用。ブラウザのフォントにMS ゴシック、MS Pゴシック、MS 明朝、MS P明朝を指定している。
（メイリオでは発生しない。）
動く文字は、10.5px～11px。
javascriptが結構多用されている。

WordPressの管理画面や、GoogleAdSenseでよく発生するのでかなり気になります。
あまりにもウザイのでWordPressの管理画面はマルチバイトパッチ内にあるadmin.cssの

body * {
  font-style: normal !important;
  font-family: Arial, Helvetica, sans-serif !important;
}

を

body * {
  font-style: normal !important;
  font-family: "メイリオ", meiryo, Arial, Helvetica, sans-serif !important;
}

に変更することで対処。
でも自分のサイト以外はどうにもなんないからなあ……。

なんというか、テキストエリアでスクロールバーが出たあと、文字を入力するごとにスクロールバーが一番上まで戻るんですよね。
入力を続行すると文字の位置と一番上をスクロールバーが激しく動く。
これは本気で困ります。

こちらのページに検証と回避策があるんですだけど、どうもまだ条件が不確定のようで俺の環境ではwidthをpx指定しても発生しました。
これもまたWordPressの投稿画面などで発生しまくってウザイことこの上ない。
他のバグはまだ我慢できるが、こればっかりは許せない。

自分のとこならhead要素内に

<meta http-equiv="X-UA-Compatible" content="IE=7" />

を入れて、IE 7で表示させるという手もあるんだけど、それじゃ何のためにIE 8使ってるか分からない。
閲覧者向けに入れるのはいいんだけど、管理者画面にまで入れる気にはならないよ……。

他の対処方法としては以下のものが挙げられます。
試してみたところ、これらのどれかで直る可能性が高いかと。
(それでも動きがぎこちないことはあります)

textareaにposition:absolute;を指定。
textareaにdisplay:block;を指定。
textareaのcols属性値を修正する。
textarea内に入力された1行あたりの文字数がcolsの属性値を超えるとバグが発生するので、colsの値を大きくしておく。
ギンペイさんが『jsdo.it』でデモを作られていますので、そちらも見てみてください。
IEでtextarea入力中にスクロールバーがピコピコする問題の対処

他のブラウザでもCSSで指定した背景画像がずれることってのはたまにありますが、IE 8はあまりにも酷すぎる。
例えば、有名なweb系ブログの投稿ボタンとかでも余裕でずれてます。
他のブラウザなら綺麗に見えるのに。

こちらに検証と解決策。コメントも必見。
これは作成時に気をつけていれば何とかなるんですけど、見てるときにはどうにもならない。

いつも気になるのはこんなところ。
こんなんでもIE 6, 7よりは遥かにマシだから使ってます。
ただ、やっぱりテキストエリアのは致命的なんじゃないかと思います。早く直らないかな。