続き開始

バグの発生条件

上記の2ページから得た情報をまとめると以下の通りです。

• Internet Explorer 8 の IE8 Standards モードで閲覧する。
• テキストエリア (textarea) の横幅 (width) を % で指定する。
• テキストエリアの横幅よりも長い文章を入力し、文章がテキストエリア内で折り返されている。
• テキストエリアの縦スクロールバーが表示されている。

以上の条件を満たした上で、テキストエリアに何か文字を入力すると、入力位置を示すキャレットがテキストエリア内で上下します（この結果スクロールバーが移動する）。

2009.06.18 追記: BlognPlus の場合は投稿フォームの幅が % 指定なのが原因のようですが、似たような症状でもこれが原因ではないケースもあるようです…。

バグの回避方法

この IE8 のバグを回避する方法は次の5つ。
1と2番はページの内容を編集できる開発者向け、3~5番はそれができないユーザー向けの解決法です。

1) textarea の横幅 (width) を % 指定にしない

textarea などのブロックレベル要素は、その横幅を実数値（px）やウィンドウ幅に対する割合（%）で指定できます。% で指定すると閲覧者の環境次第で横幅が可変になるので便利なのですが、IE8 ではそれが落とし穴になります。

不具合を回避するためには textarea の横幅は px で指定しましょう。

例) width: 95%; → width: 600px;

他のブラウザーでは可変幅のままにしたい場合は、条件付コメントで IE8 専用に別のスタイルシートを適用させたり、

<link rel="stylesheet" href="style.css" type="text/css">
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css" type="text/css">
<![endif]—>

CSS ハックを使って IE8 用に width 属性を px 値で宣言しておくと良いと思います。

textarea { width: 95%; }
head~/* */body textarea { width: 600px; }

2) IE8 を互換表示モードにする（META タグ）

テキストエリアのあるページの head 内に下記のような記述を追加すると、Internet Explorer 8 が IE7 標準モードでレンダリングされ、バグを防ぐ事ができます。

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

3) IE8 を互換表示モードにする（互換表示ボタン）

IE8 の「アドレスバー」の右側に表示される「互換表示」ボタンを押すと、そのページは IE7 標準モードで表示され、おかしな動作はしなくなります。

4) スタイルシートを無効にする

ページのレイアウトが崩れてしまう可能性があるのでおすすめしませんが、スタイルシートを無効にすればこのバグを回避する事ができます。

5) IE8 を使わない

このバグはIE8 限定のバグなので、それ以外のブラウザーを使うという消極的な方法もあります。他のブラウザー候補としては「Firefox」「Safari」「Opera」「Google Chrome」などがあります。

また BlognPlus はブログエディタ「Windows Live Writer」にも対応しているので、ブラウザーを使わなくても記事投稿できます。

• Amazon 広告スクリプト「アメンボ」Ver1.10 (12/04)
• IE8 「テキストエリアで勝手にスクロールするバグ」の回避方法 (06/17)
• Amazon 広告スクリプト「アメンボ」 Ver1.02 (06/16)
• Amazon 広告スクリプト「アメンボ」 (06/14)
• AWS の名称・仕様変更 (05/21)