CSS - 複数クラスによるIE6でのバグ回避策 | Technolog.jp - ICTウェブマガジン

CSS – 複数クラスによるIE6でのバグ回避策

  • 2010/01/28
  • カテゴリー:CMS

昨日の記事「CSS – 複数クラスを使用したデザインコントロール」の最後でIE6におけるバグについて触れましたが、jQueryを使用することでこれを回避する事ができます。コンセプトとしては、ページをロードした際に該当箇所に一意のクラスを付与するというものです。

事前準備

jQueryを実行するために先ずは、<HEAD>タグ内でjQueryファイルを定義する必要があります。オフィシャルサイトよりダウンロードしたものを使用しても良いですし、グーグルのライブラリを参照していただいても結構です。

クラスのマージスクリプト

続いて、以下のようなJSファイルを作成し、こちらも<HEAD>タグ内に定義しておきます。

1
2
3
4
5
6
$(function(){
    $("li.page-item-1.current_page_item").addClass("menu-1-active");
    $("li.page-item-2.current_page_item").addClass("menu-2-active");
    $("li.page-item-3.current_page_item").addClass("menu-3-active");
    $("li.page-item-4.current_page_item").addClass("menu-4-active");
});

上記の内容を簡単に解説をすると「li.page-item-*」と「current_page_item」が存在する場合、「menu-*-active」というクラスを動的に追加するようになっています。「li.page-item-*」の「*」部分および「menu-*-active」は状況に応じて変更してください。

以上のようにふたつのクラスから別のクラスを導出することで、IE6のバグを回避することができます。