16

HTML 構造

<a>
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>

アンカーは IE7 でのみクリック可能ではありません。hasLayout が原因で問題が発生することはわかっています。スパンの高さと幅を削除すると、問題なく動作します。

しかし、高さと幅を削除せずに機能させる必要があります。

編集:ここで例をいじることができます: http://jsfiddle.net/rxcAb

4

12 に答える 12

13

CSS のみのソリューション

Tomas-私はあなたのフィドルを実用的な例に変更しました。標準のブロック レベル要素 (a ) をインライン要素 (タグ)に含めることは無効であるためspan、タグ内でa を使用するようにコードを変更しました。タグレイアウト (私は を使用) を指定し、その上にaを設定すると、タグの「下」がプッシュされ、IE7 にタグが再びアクティブであると認識されます。以下は、私のフィドルで使用される変更されたコードです。my よりも一般的なクラス名を設定することもできます (IE7 にのみ必要な CSS プロパティについては、IE7 のみをターゲットにすることもできます)。と を変えていると思いますadivaainline-blockposition:relativespanz-index: -1spanaaie7AFixwidthheight画像によって、したがってインラインスタイリングとしてそれらを持っている理由。

HTML

<a href="http://www.google.com/" class="ie7AFix">
  <span style="width:222px; height: 150px;">
    <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
  </span>
</a>

CSS

a.ie7AFix {
    display: inline-block; /*needs to set hasLayout; zoom: 1, etc.*/
}

.ie7AFix span {
    border: solid #666 4px;
    display: block;
    position: relative;
    z-index: -1;
    line-height: 0; /*this made it "cross browser" eliminating extra bottom space*/
}

.ie7AFix img { border: 1px solid red; }

line-heightIE7 のみをターゲットにしたくない場合は、 Fiddleを元の質問 (gviswanathan と Tomas の両方による) がそれを要求したという理由だけで、上記のwidthandを保持し何らかの理由で寸法を設定する必要がなく、単に画像に二重枠を付けようとしている場合は、以下のコメントにあるthirtydotの答えがはるかに簡単です。heightspanspan

于 2012-04-02T01:21:20.150 に答える
5

jQueryを使用すると、以下はすべてのリンクを強制的に機能させ、「ポインター」カーソルを持ちます。

$(document).ready(function () {

    $('a')
        .click(function () {        
            window.location = $(this).attr('href');
        })
        .hover(function () {
            $(this).css('cursor', 'pointer');
        });

});

互換表示モードでIE7を使用してIE7をシミュレートすることをテストしましたが、IE7自体で動作することを保証することはできません。

これをより選択的に適用することをお勧めします-そのままでは、古いブラウザのパフォーマンスが低下する可能性があります-この場合、<a href='myClass'>この方法で壊れているすべてのリンクにクラス（のような）を適用$('a')し、$('.myClass')

于 2011-10-12T10:15:13.363 に答える
1

HTML5 shim を使用してみましたか? hasLayoutによって引き起こされる問題に大いに役立ちます。

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
于 2012-04-02T08:00:09.853 に答える
1

IMG から SPAN を取り出すだけです。IMG 要素は、他の要素と同様にクラスを使用してスタイルを設定できるため、周囲にスパンは必要ありません。

于 2012-09-17T15:21:40.477 に答える
0


Just wrap anchor tag inside Div or Span. Its working in IE7.

This way is wrong..?

于 2012-04-02T07:23:52.240 に答える
0

これを行う簡単な方法は次のとおりです。

<p>
 <span><img></span>
 <span> Some text <span>
 <a></a>
<p>

p { display: block; width: 100px; height: 100px; position: relative; }
a { display: block; width: 100px; height: 100px; position: absolute; top: 0; left: 0; background: #fff; opacity: .0; filter: alpha(opacity=0); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }`
于 2012-08-29T07:25:56.643 に答える
0

ああ、別の hasLayout 癖

IE7 で達成することは不可能であり、それでもスパンの幅を保持します。JS フィドルで達成しようとしていることを示すことができれば、おそらく私たちはそれを回避する方法を見つけることができます。たとえば、これは推測にすぎません。パディングを使用した の幅はanchor、完全にクリック可能な領域を作成するのに役立ちますが、それが必要な場合は「キャプション」スパンを制限できます..

修正ではない回避策の例

CSS:

a {
  display: inline-block;
  background: #ff0; 
  max-width: 50px; 
  padding: 10px; 
  text-align: center;
}

img {border: 0; display: block; margin-bottom: 10px;}
span {line-height: 1.5;}

HTML: 

<a href="#">
   <img width="50" height="50" src="http://dummyimage.com/50x50/000/fff" alt="">
   <span>Some text and even longer</span>
</a>

上記は単なる考えであり、それがあなたの求めているものでない場合は、サンプルjsfiddle.netを提供してください

于 2011-04-20T18:53:53.777 に答える
0

次の CSS ルールを a 要素に与えます。

{
    display:block;
    overflow:hidden;
}
于 2011-04-20T18:54:33.447 に答える
0

href="#"TAG内で定義しなかったため、問題になる可能性があります。そのため、 <a>TAGhref="#"内に配置します<a>。次のように書きます。

<a href="#">
   <span>   <!-- Span has width & height -->
   <img>
   </span>
   <span> Some text <span>
</a>
于 2012-04-02T07:09:12.640 に答える
0

あなたの投稿から、スパン情報テキスト付きのクリック可能な画像が欲しかったと思います!! これが役立つことを願っています;）

http://jsfiddle.net/ajinkyax/v5KH5/3/

<a href="http://www.google.com/" class="imgLink">
<img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" />
<span>Info text about image</span> </a>

CSS:

.imgLink {display: block; width: 200px; text-align: center;}​
于 2012-04-03T09:48:09.630 に答える
0

コードとデモについては、フィドルを参照してください

フィドル: http://jsfiddle.net/rxcAb/29/

デモ: http://jsfiddle.net/rxcAb/29/embedded/result/

IE7、IE8、FF、Chrome、Safari で完璧に動作します。

コードに変更はありません: 以下を参照してください

<a href=http://www.google.com/>
<div class="gal_image" style="width:222px; height: 150px;">
        <img src="http://artax.karlin.mff.cuni.cz/~ttel5535/aviff/photos/scaled/P000137_220x148.jpg" style="width:220px; height: 148px;">
</div>
</a>
于 2012-04-03T17:21:14.767 に答える