jQuery UI 1.8.19のタブがIE7でうまく動かない件の対策

  • このエントリーをはてなブックマークに追加
  • LINEで送る
jQuery UI

jQuery UIのサイトによると、1.8.19は、jQuery1.3.2+対応ということで、他のライブラリとの衝突などもあるため、今まで使っていた、jQuery1.3.2をそのまま使おうと
<header>内に次のJavaScriptを読み込ませ実行していました。


jQuery UI

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.20/jquery-ui.min.js"></script>

Chrome,Firefox,Safar,IE9など主要な最新ブラウザでは特に問題なく動作していましたが、最後のIE7でJavaScriptのエラーが表示され、タブの部分が崩れ、タブで切り替えていくはずのブロックが並んで表示されてしまいました。

古いIEは相変わらずくせ者です!

jQuery UI Tabの呼び出し方が悪いのかHTML側に問題があるのか、調べてもどちらも特に問題がない。

ということは、ライブラリ?ということで、下記の方法をトライ。無事解決しました。

読み込むjQueryのバージョンを変更

ということで、読み込むjQueryを現時点の最新バージョン1.7.2へ

http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js
↓↓↓↓↓↓↓↓↓↓
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

に変更。これでうまく動きました。(jQuery UI、2012/4/30リリースの1.8.20だと逆にうまく動かない)

動作不具合は、まずは、自分のミスを前提として確認作業を行うのですが、今回は、ライブラリのバージョンによる違いでなかなか気がつきにくい不具合でした。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


This blog is kept spam free by WP-SpamFree.