1

IE 10 では、いくつかのコンテンツ (画像/テキスト) を含む相対的に配置されたラッパー div があります。その div の内部には、ラッパー div 全体を「覆う」ように配置された絶対配置のアンカー タグがあります。z-index セットがあります。したがって、ラッパー div 内の領域全体がクリック可能である必要があります。ただし、コンテンツを持たないラッパー div の領域のみがクリック可能です。ラッパー div 全体は、IE 10 を除く他のすべてのブラウザーでクリック可能です。ヘルプ？

<div class="wrapper">
    <div class="imgWrapper">
        <img src="http://www.google.com/images/srpr/logo4w.png" />
    </div>
    <p>Here is some text</p>
    <a href="#"></a>
</div>

.wrapper { position : relative; width: 500px; height: 300px; }
.wrapper a { position: absolute; top: 0px; width: 500px; height: 300px; z-index: 2; }
4

2 に答える 2

3

(html5 doctype を使用して) アンカー タグでブロック レベルの要素をラップすることが意味的に正しいようになりました。マークアップをこれに修正することをお勧めします。

HTML

<a href="#">
    <div class="imgWrapper">
        <img src="http://www.google.com/images/srpr/logo4w.png" />
    </div>
    <p>Here is some text</p>
</a>
于 2013-03-27T15:51:07.040 に答える
1

これは IE の厄介な特性であることがしばらくの間わかりました。解決するには、透明な画像を作成し、それをアンカー タグの背景として使用する必要がありました。

background:url(transparent1x1.gif) repeat;

http://jsfiddle.net/NUyhF/6/

于 2013-03-27T15:36:22.920 に答える