- ベストアンサー
IE <a>要素の上にimgを置くと
- IE以外は赤のBOXの上でもimgの上でもリンクが生きてます。
- でもIEはimgの上ではリンクが機能しません。
- どうしたらIEでも期待した結果を得られますでしょうか？
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- CSS
- 回答数4
- ありがとう数1
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＞<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-html401j/intro/sgmltut.html#h-3.3.3 ) 仕様書を読んで見ましょう。 ＞もうIEは無視したいのですが、そうは切り捨てられませんし。。。 ＞IE、特にIEの6。これは外せないです。 ★いえ、IEは無視してください。 ie6 腐った牛乳 - Google 検索 ( http://www.google.co.jp/#hl=ja&gs_is=1&cp=13&gs_id=1k&xhr=t&q=ie6+%E8%85%90%E3%81%A3%E3%81%9F%E7%89%9B%E4%B9%B3&pf=p&sclient=psy-ab&safe=off&source=hp&pbx=1&oq=IE6+%E3%81%8F%E3%81%95%E3%81%A3%E3%81%9F%E3%81%8E%E3%82%85%E3%81%86%E3%81%AB%E3%82%85&aq=0r&aqi=g-r1&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=f840e0d9dd49d8c9&biw=1016&bih=611 ) 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_id=2f&xhr=t&q=ie6+%E6%92%B2%E6%BB%85%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%9A%E3%83%BC%E3%83%B3&pf=p&sclient=psy-ab&safe=off&source=hp&pbx=1&oq=IE6+%E3%81%BC%E3%81%8F%E3%82%81%E3%81%A4%E3%81%8D&aq=0r&aqi=g-r1&aql=&gs_sm=&gs_upl=&bav=on.2,or.r_gc.r_pw.,cf.osb&fp=753d23c93938b4c5&biw=1016&bih=611 )です。 現在のIE6のシェアは、2.33%しかありません。 ★日本のバージョン別ブラウザシェアグラフ （StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) IE6のために費やす時間・労力は無駄です。 なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE６対処ならなおさら・・ [例] <div class="nav"> <h2><a href="">なんたらかんたら</a></h2> <p><a href="">ほげほげほげ</a></p> <p><a href="">画像</a></p> </div> デザインはその後です。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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-html401j/struct/links.html#edef-A まず、画像もスタイルシートもjavascriptも使えないテキストブラウザで理解できるようにきちんとHTMLを書いてください。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )］より そのうえで、スタイルシートでデザインするのです。そうすれば期待されるようなデザインは簡単に実現できます。 [例] <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。これは外せないです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本来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-level-semantics.html#the-a-element )］より 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; }
- sisyoku_pan
- ベストアンサー率0% (0/2)
これでどうでしょうか？ <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>は可変でサイズが不明です。
お礼
ORUKA1951さん、ご回答有難うございました。 たいへん参考になりました。 お礼、遅くなってすみません。
補足
ORUKA1951さん、ご回答ありがとうございます。お世話になります。 とはいうものの、やはりIEは外せませんので。。。6だけでなく、８でも動作確認しましたが、同様でしたし。。 ＞なお、もし、期待される動作を考えられるなら、すべて個別にリンクを付けてください。IE６対処ならなおさら・・ 個別にリンクを付けるとなと、期待した動作は得られない様な機がします。 [例]ですと、たとえば、「ほげほげほげ」の上でマウスオーバーした際、「ほげほげほげ」のhoverしか効かないですよね？ マウスオーバーでnav全体の背景を変えたい訳なのですが、