IE：アンカーの一部のみがクリック可能です

Question

特定の高さと幅を持つアンカーが必要です。

ページの特定の領域の前に配置されるため、テキストはありません。ここで

はコードです：

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"></a> 

それはIE6とIE7が、すべてでは正常に動作しています。ボーダーを追加すると、アンカーのサイズが正しいことがわかりますが、クリックしようとすると、の上部のみがクリック可能になります。

なぜそれがこれを行うのか分かりません。私はアラートでもonclickを追加しようとしましたが、同じこと、アンカーの下部をクリックすることは不可能です。

これは本当に奇妙なことです。これは以前誰にでも起こりましたか？何かが助けになるでしょう。

Answer 1

以前のバージョンのIEでは、ブロックレベルの要素自体にonclickイベントを登録できませんでした。代わりに、IEはブロック内のテキストまたはインライン要素にonclickを適用します。

transparent imageを完全アンカーと同じサイズのアンカー内に配置すると、onclickが登録されることがわかりました。

<a href="/" style="width:370px;height:80px;display:block;position:absolute;"> 
    <img src="Transparent.gif" style="width: 370px; height: 80px"/> 
</a> 

Answer 2

これは、別のdiv/span /などとのZインデックスの問題である可能性があります。

Answer 3

このリンクは絶対に別のブロック、部分的にクリックイベントからの半分を隠すためにそれをオーバーラップがあるように、それは私に聞こえる位置しているため。

Answer 4

アンカーの背景に配置され、視界から外れた画像は、IE6とIE7の問題を解決します。提案されているアンカーのフルサイズの画像を持つ必要はありません。

これは、ページに既にロードされているスプライトまたはその他のイメージを使用して、サーバーへの別のコールを保存できることを意味します。ブロック要素は、背景色すべてはあなた側面それとして、罰金です得たとき

<a style="position:absolute; z-index:2; background:url(/images/your-sprite.gif) -9999px no-repeat;" href="#">Your anchor</a> 

Answer 5

この問題を処理する別の方法は、少し「ハック/回避策」です。

a { 
    .. 
    background-color: white; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    .. 
}