web-dev-qa-db-ja.com

IEでクリックできない絶対位置アンカーテキスト（テキストなし）

画像の上に絶対に配置された2つのアンカーがあり、リンクは他のブラウザー（Chrome、FF、Safari）でクリック可能ですが、IE（これまで8と9でテスト済み）ではクリックできません）

奇妙なことは、リンクにbackground-colorクリック可能ですが、background-colorはtransparentに設定されます（これは私が望むものです）彼らはもはやクリック可能ではありません、私はzoom:1しかし、運はありません。 IEでhasLayoutビットがなくなりましたIE 8/9なので、zoomを推測することは問題ではありませんこの種の問題のために。

これらのリンクを作成するためのアイデアは、IE 8/9に透明なbg？

私が取り組んできたフィドルは次のとおりです。 jsFiddle example

次のHTMLレイアウトがあります。

<div id="content">
    <img src="http://placehold.it/724x300" width="724" height="300" alt="woot" />

    <div id="countdown"></div>

    <a id="link1" href="http://www.stackoverflow.com" title="link1"></a>
    <a id="link2" href="http://www.stackoverflow.com" title="link2"></a>
</div>

およびCSS：

body {text-align:center;}
#content {position:relative; width:724px; height:300px; margin:0 auto;}

#countdown {position:absolute; width:650px; height:110px; top:100px; left:30px; background-color:blue;}

#link1 {position:absolute; width:520px; height:35px; bottom:20px; left:0;}
#link2 {position:absolute; width:200px; height:35px; bottom:20px; right:0;}
htmlcssinternet-explorercss-position
70
MikeM

私は前にこの正確な問題を抱えていて、それはいつも私から地獄を悩ませています。なぜそれが起こるのかはわかりませんが、1px x 1pxの透明なPNG（またはGIF）を常に作成し、それを次のようにバックグラウンド宣言で使用します。

a { background: url("/path/to/image.png") 0 0 repeat; }

お役に立てれば。

PS-これで実際の背景色を指定しないでください。上記の例を使用するだけで機能します。

これに加えて、アンカータグをブロックとして表示するように設定し、おそらくそれらに改行しないスペースを挿入してみてください（それらは現時点では空であり、IE up ）：

a { display: block; background: url("/path/to/image.png") 0 0 repeat; }

<a href="#">&nbsp;</a>
70
Michael Giovanni Pumo

前述のbackground-imageトリックを使用して実行できます。これに透明な画像を使用したくない場合は、画像URLで不明なスキームまたはabout:blankを使用してください。

a { background-image: url("iehack:///"); }

または

a { background-image: url("about:blank"); }

これは少なくともIE 8 + 9（私がテストした唯一のIE）およびFirefoxとChromeの現在のバージョンで動作します。有効なCSSであり、追加のトラフィックは発生しません。最初の「ハック」は、jqueryの使用時にChrome（およびおそらく他の）でJSエラーを与える可能性があります。後者は（しかし確かに）about:blankドキュメントの誤ったMIME-TypeのためにChromeにMIME-Type警告を与えます。

53
Dio F

しばらく前に投稿したコメントから移植。

少し長くなりましたが、トラフィックはありません。base64エンコードされた透過gif：

background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICR‌​AEAOw==')

これには長所と短所がありますが、便利な場合があります。また：

background-color: rgba(0,0,0,0)

私はこれを最近使用しました

24
morewry

invisibleに関する@ tw16のコメントは、opacityについて考えさせられました。

IEのfilter:alpha(opacity=0)とbackground-color:#fff（または任意の色）を組み合わせることは、このための良い解決策のようです。 IE 7-9（6は何らかの理由で不透明度フィルターを適用していませんが、6をサポートする必要がないため、これは機能します）

1x1の画像ソリューションはグローバルに効果があるため、私は彼にチェックをします。

答えてくれてありがとう。

10
MikeM

同じ問題がありました。私の実際の解決策は、適切なアンカーに境界線を追加することでした。次の例のように。利点の1つは、余分な画像が必要ないことです。

a { border-right: 1px solid transparent }
3
Jim

IEには、コンテンツがない場合にリンクを期待どおりに動作させないという厄介な習慣があります。これを修正するには、各リンクに&nbsp;コンテンツ。

試すべきもう1つのことは、display: block;を作成するリンクでIEインライン要素としてではなくブロックレベル要素としてフローします。これは、リンクを空にする必要がある場合にも役立ちます。

2
cdeszaq