4

いくつかの理由で、その上に透明な div を表示して無効にしているリンクがあります。これは FF と Chrome では問題なく動作しますが、IE ではリンクをクリックできます。div に背景色 (透明以外) を追加すると、リンクはクリックできなくなります。

これを達成する方法についてのアイデアはありますか？

ここに例があります：http://jsfiddle.net/GdEak/7/

<div id=container>
    <div class='disabled'></div>
    <a href="#">Some link</a>
</div>

CSS:

#container{
  position:relative;
}
.disabled{
  width:200px;
  height:30px;
  position:absolute;
  top:0;
  left:0;
}
a{
  display:inline-block;
  width:200px;
  height:30px;
}

ありがとう！

4

3 に答える 3

10

Internet Explorer は、「空の」要素をうまく処理できません。背景もコンテンツも持たないため、IE は要素をそこにないものとして扱います。そのため、下に積み重ねられているものと対話することができます。

これを回避するには、代わりに背景に透明な png を使用できます。

background: url(/images/transparent.png) repeat scroll 0 0 transparent;

使いやすさに関する質問ですが、クリックできない場合、リンクはまだそこにあるはずですか、それとも同じように見えますか? リンクだと思っていたものをクリックしていて、それが機能していない場合、ページが正しく読み込まれていないのではないかと心配です。

編集

何らかの理由で、このソリューション専用のイメージを作成することに反対する場合は、次を使用することもできます。

background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7");

これは、データ uri を使用して背景を透明な gif で塗りつぶし、IE8 までサポートされています。

于 2013-03-03T18:33:24.733 に答える
0

pointer-events: noneスタイルをアンカー要素に追加するだけで、リンクを無効にできます。ただし、これは IE でも完全にはサポートされていません。詳細については、こちらを参照してください。

javascript を使用して false を返すイベント ハンドラーをアンカーに追加することもできます。jQuery を使用すると、次のようになります。

$('a').click(function (e) {return false});
于 2013-03-03T18:37:03.823 に答える