アプリ版：「スタンプのみでお礼する」機能のリリースについて

IE <a>要素の上にimgを置くと

解決済

  • 質問者：kingfruits
  • 質問日時：
  • 回答数：4件

<a>の上にimgを置きたいです。
以下の様に書きました。IE以外は赤のBOXの上でもimgの上でも
リンクが生きてます。
でもIEはimgの上ではリンクが機能しません。

<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Style-Type' content='text/css'>
<style>
a {
display: block;
background-color: red;
width: 300;
}
</style>
</head>
<body>
<a href='javascript:alert(0);'>
<div style="position: relative; height: 300">
<img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'>
</div>
</a>
</body>
</html>

どうしたらIEでも期待した結果を得られますでしょうか？

以上、ご指導の程、宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1

これでどうでしょうか？



<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta http-equiv='Content-Style-Type' content='text/css'>
<style>
a {
display: block;
background-color: red;
width: 300;
}
</style>
</head>
<body>
<a href='javascript:alert(0);' style="position: relative; height: 300">

<img src="hoge.jpg" style="position: absolute; top: 50; left: 50"'>

</a>
</body>
</html>

この回答への補足

sisyoku_panさん、ご回答ありがとうございます。

確かにご回答の通りで実現できますが、、、実は<a>の中に他の要素も入ってまして。。。
質問をなるべくシンプルにしようと思ったのがよろしく無かったです。すみません。

<a href='javascript:alert(0);'>
<div>aaaa</div>
<div style="position: relative; height: 300">
<img src="shop.cgi?img=1" style="position: absolute; top: 50; left: 50"'>
<div>

上記のような感じなんです。<div>aaaa</div>の次を起点にtop,leftを指定したいのです。
<div>aaaa</div>は可変でサイズが不明です。

補足日時：2012/02/14 23:33
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

　本来HTMLでは、<a>要素内に<div>は入れられません。


　他のブラウザで、これが認識されるのは、HTML5では<a>要素に、ブロック要素を含むことが出来るようになったからです。(内部にリンクやボタンなどがないときに限る)
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). This example shows how this can be used to make an entire advertising block into a link:
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.6 Text-level semantics — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/text … )］より

　IEは、HTML5に対応していませんから、<a>要素は、<div>の直前で閉じられていると判断します。

　この場合、divが必要とは思われません。

<p class="linkToHoge"><a href='javascript:alert(0);'><img src="hoge.jpg" width="" height="" alt=""></a></p>
とかで良いはずです。

　これをご希望のとおりデザインすれば良いです。
p.linkToHoge{
width:300px;
height300px;
position:absolute;
top:;
left:;
}
p.linkToHoge a{
display:block;
width:100%;
height:100%;
background-color:;
padding:50px;
}
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

No.2です。


No.1への補足
＞実は<a>の中に他の(ブロック)要素も入ってまして
それは、現在のウェブ標準(HTML4.01strict+CSS2.1)では、誤りです。
12.2 A要素
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
　-->http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …

　まず、画像もスタイルシートもjavascriptも使えないテキストブラウザで理解できるようにきちんとHTMLを書いてください。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer. … )］より

　そのうえで、スタイルシートでデザインするのです。そうすれば期待されるようなデザインは簡単に実現できます。

[例]
<div class="nav">
　<h2><a href="">なんたらかんたら</a></h2>
　<p><a href="">ほげほげほげ</a></p>
　<p><a href="">画像</a></p>
</div>
　とか、文字や画像を選択できなくて良いなら、h2,p,imgにリンクは不要。要素の選択が必要なければ、書かない

　文書構造に従った、正しいHTMLがあれば、どのようにでもデザインできます。逆にそれがなければ、期待したデザインはできないし、将来デザインを変えることもできない===スタイルシートの最大の利点・・スタイルシートを変えることでデザインを一新できる・・という長所を捨てることになります。文書構造とプレゼンテーションは分離しましょう。

★具体的な内容は不要ですが、その部分の文書構造を示してください。

この回答への補足

ORUKA1951さん、ご回答ありがとうございます。

この質問、http://oshiete.goo.ne.jp/qa/7301665.htmlの質問で、
「A要素中に「Sold Out」を入れておけば、たとえそれが最前面に表示されていても、clickや hoverに影響を与えません。」
って回答があったので、「あ、そうなの」と色々試してたのですが。。。

<a>の要素の中に<div>を入れたらダメって事なんですよね。。。<span>も？

やりたい事は、前の質問の通りなのですが、
ひとつのボックスをクリックするとリンクへ、そしてそのボックスの中を色々とレイアウトしたいんですね。
ご回答で示された[例]ですと、class="nav"全体で所謂ボタン的な動作をさせていんですね。
hoverで背景も変えたいです。
で、IEのhoverが<a>でしか効かないので、困ってます。もうIEは無視したいのですが、そうは切り捨てられませんし。。。
IE、特にIEの6。これは外せないです。

補足日時：2012/02/15 16:09
通報する
    • good
    • 0
    • 件
通報する

No.4ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞<a>の要素の中に<div>を入れたらダメって事なんですよね。

。。<span>も？

　いえ、spanはＯＫです。
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
　は、
<!要素 A
-- 　　　　　　　　開始タグ必須　終了タグ必須
(%inline;)*　　　 (インライン要素)ゼロ個以上
-(A)　　　　　　　Aは出現してはならない。
--意味はアンカー -->

と読みます。
→3.3.3 要素宣言 ( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )
　仕様書を読んで見ましょう。

＞もうIEは無視したいのですが、そうは切り捨てられませんし。。。
＞IE、特にIEの6。これは外せないです。
★いえ、IEは無視してください。
ie6 腐った牛乳 - Google 検索 ( http://www.google.co.jp/#hl=ja&gs_is=1&cp=13&gs_ … )
　IE6は、マイクロソフト自身も撲滅キャンペーンInternet Explorer 6 Countdown | Death to IE 6 | IE6 Countdown ( http://www.ie6countdown.com/ )を行ってますし、多くのWeb企業も同様( http://www.google.co.jp/#hl=ja&gs_is=1&cp=9&gs_i … )です。
　現在のIE6のシェアは、2.33%しかありません。
★日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-ver … )

IE6のために費やす時間・労力は無駄です。

なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE６対処ならなおさら・・

[例]
<div class="nav">
　<h2><a href="">なんたらかんたら</a></h2>
　<p><a href="">ほげほげほげ</a></p>
　<p><a href="">画像</a></p>
</div>
デザインはその後です。

この回答への補足

ORUKA1951さん、ご回答ありがとうございます。お世話になります。

とはいうものの、やはりIEは外せませんので。。。6だけでなく、８でも動作確認しましたが、同様でしたし。。

＞なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE６対処ならなおさら・・
個別にリンクを付けるとなと、期待した動作は得られない様な機がします。
[例]ですと、たとえば、「ほげほげほげ」の上でマウスオーバーした際、「ほげほげほげ」のhoverしか効かないですよね？
マウスオーバーでnav全体の背景を変えたい訳なのですが、

補足日時：2012/02/15 18:39
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、ご回答有難うございました。
たいへん参考になりました。

お礼、遅くなってすみません。

通報する
お礼日時：2012/03/12 19:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報