jQuery UI ボタンと IE8 のワナ｜加藤正人｜デベロッパーズブログ

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

HOME >
加藤正人 >
タイトル

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() は使わない方が良さそうだ。