DEVELOPERS BLOGデベロッパーズブログ
- HOME >
- 加藤 正人のデベロッパーズブログ >
- IE8 と style 値でハマった話
加藤 正人のデベロッパーズブログ
- 氏名
- 加藤 正人
- 役職
- 多分SE
- 血液型
- 秘密
- 出没
- 美味しいもののあるところ
- 特色
- タヒチ大好き。ちょいメタボ。
- 2020/12/15
- CakePHP3 のリダイレクトがうまく行かない例
- 2020/11/12
- Apache Bench
- 2020/10/05
- PhpSpreadsheet でExcel ファイルを読み込む (CakePHP3)
先日 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 で処理するのが良さそうだ。
2020/12/15
2020/11/12
2020/10/05
2020/09/11
2020/08/03