Edited at

IE8では不可視のinputをlabelで操作出来ない件

More than 3 years have passed since last update.

ほぼタイトルで落ちているが。

ラジオボタンに好きなスタイルを適用するのにlabelと隣接セレクタを使っていたページがあった。

ラジオボタンの切り替えで非同期にコンテンツを切り替える仕組み。

これを急遽IE8対応させねばならなくなったが、IE8では隣接セレクタは使えないため、display:blockにして背景に画像を仕込んだlabelをクリックしてもlabelが選択状態にならないのは良いのだが、コンテンツが切り替わらないのは納得がいかず、調べてみるとIE8ではラジオボタンが不可視だとlabelをクリックしても選択状態が切り替わらない事が判った。

因みに、display:noneでもvisibility:hiddenでもダメ。そしてIE8にopacityはない。

さしあたってはzoom:0.001で動いたのでこれで対処した(0だと無効)。


追記

思いついて試してみたらposition:absolute;z-index:-1;で動くのでこれが良さ気。


実証コード

IE8で不可視のinputがlabelで操作できない件 - js do it

http://jsrun.it/hadakadenkyu/u13k/