6

次の HTML があるとします。

<div class="with-shield">
    <div class="shield"></div>
    <input type="radio"/>
</div>
​

...そしてCSS:

.with-shield {
  position: relative;   
}

.shield {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;   
  z-index: 100;
}

（フィドル）。

FireFox と Chrome ではラジオ ボタンをクリックできません (.shield上に が配置されているため) が、IE9 (および古いバージョンだと思います) はできます (開発者ツール.shieldが正しく配置されているにもかかわらず)。

.shieldIE でクリック イベントを吸収する (つまり、ユーザーがラジオを選択できないようにする) ように CSS を変更するにはどうすればよいですか? </p>

フォーム ビューを再表示するだけで、顧客調査の結果を従業員に提示しているので、これが必要です。従業員が誤って値を変更するのを防ぐためにオーバーレイを追加したい (既に無効にしているtabIndexなど)。

4

3 に答える 3

14

後でパーティーに行きますが、これは私がしたことです：

1x1 ピクセルの透過 GIF の base64 エンコードを背景として使用するだけで、すべてのクリック/タップが停止します (IE9 および IE8 でもテスト済み)。

background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
于 2013-11-06T12:44:36.443 に答える
2

最近同じ問題が発生しました。Muthu Kumaran's は素晴らしいですが、IE < 8 を考慮していませんでした。これを行う方法は次のとおりです。

.with-shield {
  position: relative;   
}

.shield {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;   
  z-index: 100;

background-color:#fff;
opacity:0;
filter: alpha(opacity = 001);

}

残念ながら、IE8 では jsfiddle も jsbin も正しく動作していないのでお見せできますが、ローカル マシンでテスト ページを作成してテストしたところ、期待どおりに動作しました。

于 2013-04-04T19:42:36.737 に答える