css - CSS の問題 - Box の上のリンク (position:absolute) が IE + Opera で機能しない

Question

div-box の下部にリンクがあります。これには position:absolute があり、div-box 全体をオーバーレイする必要があります。

そのように： http://jsfiddle.net/UpwvT/4/

FF と Webkit では問題なく動作しますが、IE + Opera では「一部のテキスト」はまだリンクではなく、クリックできません。

誰でもアイデアはありますか？:)ありがとう

Answer 1

Opera と IE のバグのようです。

Opera と IE9 用の私のハックがあります。これを追加.link
background-color: rgba(204,204,204,0.01);

非常に透明な背景です。

http://jsfiddle.net/UpwvT/19/

IE8では動きません。

Answer 2

問題は解決しました-cssにリンクの透明な背景を追加するだけです-私にとっては、透明なgifファイルで問題なく動作します。

.link_css{
background: url(path_to_your_file/trans.gif);
}

Answer 3

私は Pavlin によって提案されたのと同じ解決策を使用しましたが、次のように 1x1px の透明な GIF data-url-encoded を使用しました。

.link_css{
  background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

そのため、CSS スタイルシートで数バイトの増加が発生するだけで、サーバーへの余分な http 要求を回避できます。data-url は IE8+ でサポートされています。
http://caniuse.com/datauri

Answer 4

このエラーの原因はまだわかりません...個人的には、完全に透明なbgをそこに置きました

background: rgba(0,0,0,0);

Answer 5

次のようにボックス内にリンクボックスを追加する必要はありません。

<div class="box" onclick="location.href='http://google.com'">
    some text
</div>

そして、次のようにスタイルを定義します。

<style>
    .box {
        width:200px;
        height:200px;
        background:#ccc;
        position:relative;
        text-align:center;
        z-index:1;
        cursor: pointer;
        cursor: hand;
    }
</style>

実際のデモ: http://jsfiddle.net/rathoreahsan/cLmqe

Answer 6

次のようにdivの周りにリンクタグ(a)を配置するのはどうですか:

<a class="link" href="http://google.com">
    <div class="box">
        some text
        <div class="linkbox">
            &nbsp;
        </div>

    </div>
</a>

編集

次のことも可能である必要があります。

<div class="box">
    <a class="link" href="http://google.com">
        some text
        <div class="linkbox">
            &nbsp;
        </div>
    </a>
</div>

私はそれを修正する必要があると信じています。