jQuery UI ボタンと IE8 のワナ｜加藤正人

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

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

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

氏名: 加藤正人

役職: 多分ＳＥ

血液型: 秘密

出没: 美味しいもののあるところ

特色: タヒチ大好き。ちょいメタボ。

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

一覧

2020/12/15: CakePHP3 のリダイレクトがうまく行かない例
2020/11/12: Apache Bench
2020/10/05: PhpSpreadsheet でExcel ファイルを読み込む (CakePHP3)

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