IE7閲覧時のLiteboxの動作を修正

先日の「ブログにLiteboxを導入」のエントリーでも書いたとおり、InternetExplorer7での閲覧時、Liteboxの動作に不具合がありました。HTMLのタグやスタイルシートを削除しながら不具合箇所を調べていったところ、ページのレイアウトを構成するためのスタイルシートに原因があり、これを修正しました。

動作確認のためのサンプル画像

IE7閲覧時のLiteboxの動作を修正 IE7閲覧時のLiteboxの動作を修正 IE7閲覧時のLiteboxの動作を修正

Liteboxスクリプトに同梱の画像を使用しています。

ブログにLiteboxを導入

これまでブログに小粋空間別ウィンドウでリンクを開きますで紹介されているLightboxJSを導入していましたが、同じ小粋空間の「Litebox 1.0 をブログに適用する別ウィンドウでリンクを開きます」を参考に、Liteboxに変更しました。

基本的な動作はLightboxJSと変わりませんが、拡大表示時のアニメーションが多少変更になり、同一グループの画像をスライドショーで表示できるようになりました。

JavaScriptファイルとスタイルシートの追加、拡大画像を表示するためのアンカータグにrel属性を付けることで完成します。

先日InternetExplorer7をインストールした際に当ブログの表示を確認したところLightboxJSの動作がおかしかったのですが、このLiteboxでも同じような症状が出ています。

拡大したい画像をクリックすると、ブラウザのスクロールバーを一番上にもっていっている時の領域のみ画面が暗くなり、それ以外の領域では背景色に拡大画像がオーバーレイ表示されてしまいます。

調べてみたところ、当ブログではDOCTYPE宣言をXHTML1.0で設定しているのですが、これを削除することで正常に動作するようになりました。しかしDOCTYPE宣言を削除するとW3Cのチェックに通らなくなるため外したくありません。

なんとか正常に動作するように調べてみようと思います。

Firefox2とInternetExplorer7をインストール

先日リリースされたFirefox2とInternetExplorer7(IE7)の両ブラウザをインストールしました。閲覧するサイトによってブラウザを使い分けているのですが、普段はFirefoxを多用しています。

まずはFirefox2をインストールし起動してみました。普段閲覧しているサイトは問題無く表示しています。また、画面のレイアウトもバージョン1.5の時とほとんど変わらず使いやすいです。一部プラグインが対応していないのが困ったところか。

次にIE7のインストール。インストールは問題無く完了しました。起動してみると・・・ブラウザのボタン配置が変更になっていてなんだか使いづらい。ツールバーに表示されていた「戻る」「進む」「ホーム」などのボタンがいろんなところに散らばっています。これは慣れれば問題なしか?

一部のサイト表示がIE6の時と比べて文字が大きくなったりレイアウトが崩れたりしています。当ブログでは「LightboxJS」を導入しているのですが、動作がおかしいようです。エントリー内の画像をクリックすると、ページ全体が暗くなり拡大画像がオーバーレイ表示されるようになっています。しかしIE7の場合、ブラウザのスクロールバーを一番上にもっていった時に表示される領域のみ暗くなり、それ以外の領域の場合、暗くならずページの背景色に画像がオーバーレイ表示されてしまいます。スタイルシートの問題かな?なんとか対策を行わなければいけません。

一番困ったのはコンピュータの再起動後。再びIE7を立ち上ようとするとエラーが出ます。何度再起動・IE7を立ち上げようとしてもエラーの連続で、ブラウザ画面を見ることができなくなりました ・・・ということで、IE7はアンインストールしてIE6に戻しました。

ラジコンカーとキーボード ゲット

2006年11月4日、友人と飲みに行った帰りに、ゲームセンターに寄ってプライズ品のゲットに挑戦してきました。