ウェブ、ショウジン

IE7におけるz-indexのバグ回避(jQuery使用)

2011-3-23
Category
CSS jQuery

IE7ではz-indexの解釈が違うらしく、他のブラウザ(Fx、IE6や8、Chrome、Safariなど)では問題なかった指定が効かなかったので、これを解消するためにとった手段をメモ。

なんでもIE7においては、z-indexは「同一階層」内においての重ね順を指定するものらしく、グローバルに階層の前後を指定するものではないと。

つまり。
各階層で後に書かれたものが上のレイヤーにのっかることになる。
深い階層でどんなにz-indexを操作しても、
その要素を含む浅い階層でz-index指定されていなければ、
どんなに値を入力したとしても、
浅い階層上で後に書かれた要素よりも上のレイヤーにさせることはできないってさ・・・

なんだこれ!バカか!

引用元:CSS/IE7でのz-indexについて

細かいことはググって調べればたくさん記事がでてくるけど、とりあえず面倒なので手っ取り早い解決法としてjQueryをつかってすべてのdivに対してz-indexを指定するという方法を選択。

そのためのコードを記述したjsファイルを以下の内容で外部jsファイルとして作成。

zindex.js

$(function() {
    var zIndexNumber = 1000;
    $('div').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});

z-indexのバグ症状を出しているページにおいて上記のjsファイルとjQuery本体を読み込み

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>
<script language="JavaScript" src="js/zindex.js" type="text/javascript"></script>

以上。

あんまり使いたい手法ではないけれど。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿