1

十分に単純であるべき質問がありますが、対処するのは非常にイライラします。まず第一に、私はブラウザ間の互換性を最大限に高めようとしており、できれば HTML5 に準拠するように努めていることを述べたいと思います。

私がやろうとしているのは、その中に img と h3 タグの両方を持つブロック領域リンクを作成することです。

少し前の私の最初の試みは、次のことを行うことでした：

<div class="link-block">
   <a href="#">
      <img>
      <h3>Title</h3>
   </a>
</div>

(私の理解では) HTML5 仕様に従ってアンカー タグにヘッダー タグを含めることは有効ですが、古いバージョンの Internet Explorer を扱う場合、リンクが常にクリック可能であるとは限らないという奇妙な問題が発生しました。（ただし、この問題は、サイトの構造がわずかに異なっていたことが原因である可能性があります）

一方で、より後方互換性のある方法で同じことを達成するために、少し異なるアイデアを考えました。それは、次のようなことでした。

<div class="link-block">
   <a href="#"></a>
   <img>
   <h3>Title</h3>
</div>

次の CSS マークアップを使用します。

.link-block{
   position: relative; 
}
.link-block a{
   width: 100%; height: 100%; display: block;
   position: absolute; top: 0; left: 0; 
}

これは、私が試したすべてのブラウザー (Opera、Firefox、Chrome、Safari) で美しく動作します -- Internet Explorer を除きます。私は IE10 で試してみましたが、その領域にカーソルを合わせるたびに、クリックできる領域は画像または h3 タグで覆われていない領域だけであると判断されました。

上記の 2 番目の方法は技術的に有効ではありませんか? IE はコンテンツを適切に表示する際に多くの問題を抱えている傾向があることは知っていますが、IE10 では最終的に多くの問題が修正されるはずだと思いました。

私がやろうとしていることを達成するための適切なアプローチは何ですか?

ありがとう！

<a>編集:タグの z-index<h3>と and<img>タグをいじったことにも注意してください。それでもIEに同じ問題が発生します。

4

1 に答える 1

1

ここで2つの問題に直面していると思います。まず、一部の古いブラウザー (主に古い IE) は、正しいか間違っているかにかかわらず、ブロック要素が検出されるたびにすべてのインライン要素を暗黙的に閉じます。この場合、最初の試行は次のように解釈されます。

<div class="link-block">
   <a href="#"><img></a>
   <h3>Title</h3>
</div>

これはまったく役に立ちません。display:blockこれに対する解決策は、Aタグで使用することでした。

2 つ目の問題は、一部のブラウザー (これも主に IE) が、今回はほとんど間違って、可視要素の上に不可視要素を配置すると、不可視要素ではなく可視要素と対話する必要があると想定していることです。これにより、最初の問題の解決策が冗長になり、2 番目の解決策で問題が発生します。

私の提案は、Aタグを完全に忘れて、代わりに親の onclick イベントを使用することですDIV:

<div class="link-block" onclick="document.location.href='#';">
    <img>
    <h3>Title</h3>
</div>

クラスに追加cursor: pointer;してlink-blockカーソルを変更し、リンクのように動作させることもできます。

于 2013-04-28T08:14:51.353 に答える