デベロッパーズブログ

  1. HOME > 
  2. 加藤 正人のデベロッパーズブログ > 
  3. IE8 と style 値でハマった話

加藤 正人のデベロッパーズブログ

加藤 正人

氏名
加藤 正人
役職
多分SE
血液型
秘密
出没
美味しいもののあるところ
特色
タヒチ大好き。ちょいメタボ。

加藤 正人

2014/02/22

IE8 と style 値でハマった話

 

先日 jQuery コードを書いていて、特定の条件にマッチする要素を抽出するコードを端折って

// style 属性とクラスで絞り込んだ ul オブジェクトを current に代入する
var current = $('ul.sub_menu[style~="block;"]);

と記述した。class が sub_menu である ul 要素のうち、display block になっているもの、にマッチさせるつもりである。(この時の ul 要素には、display スタイル以外のスタイル指定はない。)

ところがこのコード、IE9 以降と Firefox系、Google Chrome 系は意図したように動作するのだが、IE8 だと動作しない。IE8 用に selectivizr.js は導入済みなので、CSS3 セレクタがらみの問題ではない。

で、デバグ中にふと思いついて当該コードの前に

$('ul.sub_menu').each(function () {
	alert($(this).attr('style'));
});

というコードを挿入して各 ul 要素の style 属性を表示してみたら、

  • IE8 ⇒ 'display: block'
  • IE9 以降、Firefox系、Google Chrome ⇒ 'display: block;'

という結果になった。どうも IE8 は最後のスタイル指定の末尾には「;」を付けないようだ。このため、style~="block;" ではマッチしなかったのだった。しかし、style~="block" と末尾のセミコロンを外すと IE8 では意図したように動作するが、他のブラウザではマッチしないので動作しない。単語マッチの ~= ではなく文字列としての部分マッチ style*="block" にすればどちらも動作するが、今後の拡張性を考えると display: block; 以外にマッチしかねないのでちょっと怖い。

結局スタイル内の項目で絞り込む場合は、「セレクタ1発」ではなく地道にループ展開して

var current;
$('ul.sub_menu').each(function () {
	if ( $(this).css('display') == 'block' )
	{
		current = $(this);
	}
});

のようにキチンと css で処理するのが良さそうだ。

関連タグ: IE8  jQuery 

関連エントリー

お気軽にお電話ください 052-875-9930 年中無休にて対応しております

メールでのお問い合わせはこちら

お問い合わせフォーム

ページの先頭へ戻る

ページトップへ戻る