まだ重たいCMSをお使いですか?
毎秒1000リクエスト を捌く超高速CMS「adiary

2009/06/02(火)IE8のメモ+バグメモ

adiaryをIE8(IE8モードの標準準拠時)に対応させたときのメモ。

IEモードスイッチを標準準拠にする

DOCTYPEレンダリングモード以外に、IE6/7互換設定を一切無視して*1IE8以降の標準でレンダリングさせる。

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

*1 : クライアント側でIE6互換と指定してもそれを無視する

HTTP_USER_AGENT

IE8ならば本来、

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)

となるはずですが、IE8側で例のIE7互換性設定がされていると(厄介なことにイントラネットでは標準でオン)、

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0)

となる。仕方が無いので「Trident/4.0」を見てIE8と判別する。

CSSの@charset宣言

CSSの @charset宣言 は必ず1行目に書く必要がありますが、IE8の@charsetは仕様に厳格でないといけないようです。

@charset "EUC-JP"

このとき「@charset」と「"EUC-JP"」の間は半角スペース1個でないとIE8は認識しません。TABや半角スペース2個以上では認識しません

ちなみにこのIE8の実装が正しい動作のようです

input type="file"で直接入力できない

Firefox等では以前より直接入力できなかったのですが、IE8でもこれができなくなりました。テキストボックスがグレーアウトします。

MSによると

歴史的に見て、HTML の ファイル アップロード コントロール (input type=file) はかなりの数の公開された脆弱性の温床であり続けました。この問題を解決するため、このコントロールの動作について二つの変更を加えました。

ユーザーの入力するローカルのファイル パスをキーストロークの監視によって盗む攻撃を防ぐため、ファイル パスの編集ボックスを読み取り専用としました。ファイルをアップロードする場合、ファイルの参照ダイアログを利用して、ファイルを指定する必要があります。

ついでにファイルのパスを送る病(これは設定できる)も変更されたようです。

input_type_file.png

フォームのtextareaが勝手にスクロールする

IE8において大きめの textarea の挙動がおかしい。

  • 右のスクロールバーが中間(一番上や一番下以外)の位置にある。
  • スクロールバー付近か行をまたがって入力されるなど、文字が多めに入力されている状態である。

そのとき、特定の行で文字を入力すると、未確定状態・確定状態に関わらず文字を入力するごとにスクロールバーが勝手に移動するという謎のバグがあります。

ie8_textarea_bug01.png
 
ie8_textarea_bug02.png

さらに、スタイルでline-heightが100%より大きく指定されていると、1文字入力するごとに、スクロールバーがガクガク上下に移動し、大変に使いにくくなります。

回避策は不明(CSSをoffにしても発生します)間違え。詳しい情報が分かりましたら、コメントでもTBでもお知らせ願えると助かります。

追記 2009/06/17

position:absolute

にしてあげると問題はおきない模様。どうも1文字入力するごとにオブジェクトの位置計算ルーチンか何かが走っているらしく、その辺の計算が重くなってくるとバグる模様。position:absolute ってわけにもいかないしなあ。

さらに追記。 2010/10/15

position:absolute で回避する技が(アップデートで)いつの間にか使えなくなってました。IEがabsoluteを正しく解釈して、absoluteでレンダリングされるのでほかの表示が崩れる。

substr(-1)の結果が正しくない 2014/08/23

IE8では、"abcd".substr(-1)をすると"abcd"が返ってきます。(正しくは"d"です)

文字列の最後の文字を判定する際によく使う方法なので、かなり厄介なバグです。