DEVELOPERS BLOGデベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. jQuery UI ボタンと IE8 のワナ

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2013/06/01

jQuery UI ボタンと IE8 のワナ

 

先日 jQuery UI を使用したサイトを試作してテストしてもらっていたら、こちらのテスト (Firefox、Chrome、IE9) では問題なく動作しているページが IE8 だとエラーになることが判明した。

エラー箇所を IE の開発者ツールでデバグしてみると、

  • jQuery コード内で appendChild() にによる タグの追加に失敗している
  • そのコードは、jQuery UI の button 生成部から呼び出されている
  • その時のオブジェクトは img 要素に対応するオブジェクト
  • jQuery を 1.10 にバージョンアップしても状況は変わらない

ということが判明した。

この状況は、ボタン画像の img タグを jQuery UI の button 機能で直接ボタン化しようとする場合に発生する。button 要素や input 要素、a 要素によるボタンの場合は発生しない。

どうも IE8 では img 要素オブジェクトあるいはそれに相当する jQuery オブジェクトに appendChild() が実装されていないようだ。(IE9 および IE10、Firefox 21.0、Google Chrome 26.0.14.10.64 m では問題なく動作する。)

かといって、画像を div や span で囲んでそちらに button() を適用する、あるいは input type="image" にして button() を適用すると画像の周りに余白が付いた形でボタン化されてしまうのでこれに対応するにはちょっとしたコードを書かねばならない。

IE8 (および恐らくはそれ以前のバージョン) で画像ボタンを使用する可能性のある場合は、jQuery UI の  button() は使わない方が良さそうだ。

関連タグ: jQueryUI  jQuery  IE8 

関連エントリー