CSS、z-indexのIE挙動に何ヵ月も悩ませられる・・・ようやく問題回避

ここ何ヵ月も悩まされていた問題がようやく回避できました。このブログのタイトル下部のメニューバーにマウスをホバーさせると、CSSで制御しているサブメニューが左の写真のように表示できるように実装しました。このサブメニューがなぜか特定のIE(同じバージョンなのに問題が発生する場合と発生しない場合がある)において、jQueryで動作させているスライド画像の下に隠れてしまう問題がどうしても解決できなかったのですが、やっとその解決策が見つかりました。問題解決に至るまでの道のりを記録しておきます。あぁ~~~これで何ヵ月も悩まされていた問題がクリアできた。。。Webページのレイアウトを定義するCSSというファイルには、ブロック要素の重なりを制御するためのz-indexプロパティがあります。スルスルっと伸びるサブメニューがjQueryで動作させている画像の裏側になぜか特定のIEで隠れてしまう問題に数ヵ月前に直面しました。この問題について述べられているのはほとんどが海外のサイトしかなく、「これはIEのブラウザバグであり、JavaScriptで強制的にz-indexを制御する必要がある。」との記載があったため、早速以下のスクリプトを実装してみました。

 
[code lang=”js”]
$(function() {
var zIndexNumber = 1000;
$(‘div’).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber -= 10;
});
});
[/code]
 
IEのバグを回避するために、なんでいちいちJSを実装しないといけないんだ・・・IEなんてホント早くなくなってもらいたい・・・ブツブツ、、、っと思いながら、なくなくJSを実装し、さて確認試験・・・見事にサブメニューはjQueryで動かしているスライド画像の上部に表示され、「ようやくなおった・・・」っと思ったのもつかの間、サブメニューは表に出てきたけれど、jQueryのスライド画像で指定しているリンクが効かないじゃん!!これではまったくもって中途半端な実装のため、更に解決策を探る・・・。
 
一番表に表示させたいブロック要素のz-indexプロパティの値を大きくさせようとするのでは無く、ブロックの後ろにまわしたい要素を強制的にdivで囲ってしまえばよいとの書き込みがこちらのサイトにあったので、さっそくjQueryで指定している表示要素をdivで囲ってあげる。「おっ!見事にサブメニューが一番上に表示されるようになったじゃん!」っというのもつかの間、やはりjQueryのスライド画像で指定しているリンクが有効にな・ら・な・い。。。
 
これはIEのバグ、このバグ回避はどうしたらいいんだろう・・・っと海外のサイトを更にいろいろ探っていた時にふと、「んっ?まてよ、サブメニューを構成しているブロック要素はheader要素なので、もしかしてheader要素に対してz-indexを指定すればいいんじゃない?」というような考えが脳裏をめぐったので、早速header要素でz-indexプロパティを指定してみたところ全ての問題がクリアされました、、、(ちょっとデグレしているところが無いか心配なので気は完全に抜けないですが。。)
 
もしかして、これって思いっきり基本的なことなんじゃないかい?・・・って思ってしまいました。Webサイトの制作スキルは全てが独学なので、基礎を教えてくれる先生が欲しいです。。。このブログもつぶしきれないほどまだまだ細かい修正は沢山あるし。。。
 
なかなかブログの更新ができず何枚か写真を撮りためていたので選別してアップします。

まずはこちら、ベトナム産のマメスナギンチャクです。ここ何年かあまり見かけてなかった気がするのですが、最近ちょこちょこっと見かけるようになってきました。
ベトナム産マメスナギンチャク
 
こちらはフィジー産のマメスナギンチャク。フィジー産のなかでもなぜかこのマメスナだけ、一部のポリプにおいて蛍光色がとっても強いです。水槽へ入れたのは2011年2月26日なので、もう9ヵ月ぐらい経過しています。ライブロックが覆いつぶされるほどポリプが増殖してくれました。
フィジー産マメスナギンチャク
 
こちらは先日購入したオレンジピール。とっても凶暴でシマヤッコがあっという間にやられてしまいそうなので隔離しています。
オレンジピール
 
ん~早く注文して作ってもらっているキャビネットが届かないかな。。。

不正アクセス防止のため、コメント入力いただいた方の送信元ホスト名、IPアドレスを記録しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

新着記事

全ての記事を確認する