1

私の質問をご覧いただきありがとうございます。

私は Web 開発が初めてで、以下の HTML が IE では適切に表示されず、Chrome、Firefox、および Safari では機能する理由を誰かが明確にしてくれることを望んでいました。divs目標は、画像とタイトルでクリックできるようにすることです。

IE では、背景とh2中divがクリック可能です。動作しているように見えるタグでラップし<img>ました<a>が、ハックのように感じます。

HTML:

<a href="locations.html">
  <div class="boxSmall">
  <h2>Location</h2>
    <div class ="boxImage">
      <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
    </div>  
  </div>
</a>

これについて説明をいただければ幸いです。ここで例を表示できます。

HTML 5 ではブロック アイテムをリンクに含めることができるはずであることがわかりました。IE はそれを認識していますか? 標準に準拠したコードを書きたいのですが、実際には機能するコードを書きたいのです。

http://downtownrmt.com/locations.html

4

3 に答える 3

1

通常、次をタグに追加するとうまくいきます。

a {
display: block;
position: relative;
}

aこれは、ボックス内の項目へのリンクを単に適用するのではなく、全体をボックス レベルとして処理するように IE に指示します。

于 2012-08-04T01:18:57.120 に答える
-1

投稿されたコードの代わりに、あなたの例で次のように表示されます。

<a href="services.html">
    <div class="boxSmall">
        <h2>Services</h2>
        <div class="boxImage">
            <a href="services.html"><img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/></a>
        </div>
    </div>
</a>

すでに書いたように、それは標準準拠の HTMl4 ではありませんが、(コメントで説明されているように) 有効な HTML5 です。少なくとも Firefox はそこから非常にクレイジーなコードを作成しますが。したがって、FireBug またはインスペクターを使用して DOM を確認してください。

それでは、使用しましょう：

<a href="services.html">
    <span class="boxSmall">
        <span class="h2">Services</span>
        <span class="boxImage">
            <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
        </span>
    </span>
</a>

CSS のdisplayプロパティを使用してブロックを再度取得できます。

boxImage, boxSmall, h2 {
    display: block;
}

h2を削除する必要があるため、さらにいくつかのスタイルを設定する必要があるかもしれませんが...

PS: 最終的に IE でも動作するはずです ;)

于 2012-08-04T01:19:54.490 に答える