- ベストアンサー
IEでリンクタグが効かない
- IEで画像をクリックしてもアンカーが効かない問題についての回避方法を探しています。
- JavaScriptを使用すれば解消できますが、ウィンドウ幅の問題があります。
- aタグを親要素にするブロック構成の問題について、CSSで解決する方法を知りたいです。
- funafuna38
- お礼率100% (4/4)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
> IEでのみ画像をクリックしてもアンカーが効きません（無反応）、テキストの部分や空白の部分はちゃんとリンクになります。 <span class="box">～</span>に対するCSSの設定が不明なので、推測ですが、おそらくその箇所に対して幅を決めてボーダーを引いたりしてボックス的に見せようとしているのではありませんか？そして肝心のそこに対して"display: block;"でブロック要素化していないのでは？ 以下の様なサンプルを作って検証してみたところ、下記の様な条件の違いで表示結果が異なりましたので。 ※ソースでは空要素imgが閉じていたので、XHTMLと判断しております。 ※画像のサイズを仮にW100×H40とし、boxの領域がわかりやすい様にそれより大きくW150と想定して背景色を塗ってあります。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="./css/sample17.css" /> <title>サンプル</title> </head> <body> <div id="test"> <h1>【ケース1】</h1> <a href="#" class="block"> <span class="box"> <span class="block"><img src="images/dummy.jpg" alt="ダミー" width="100" height="40" /></span> <span class="block">タイトル</span> </span> </a> <h1>【ケース2】</h1> <a href="#" class="hoge"> <span class="box2"> <span class="block"><img src="images/dummy.jpg" alt="ダミー" width="100" height="40" /></span> <span class="block">タイトル</span> </span> </a> </div> </body> </html> ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- /* ケース1：質問者様オリジナル */ .block { display: block; } span.box { width: 150px; background: #ccf; } /* ケース2：修正版 */ a.hoge { width: 150px; display: block; background: #cfc; } a.hoge span { display: block; } span.box2 { background: #cfc; } ---------------------------------------------------------------------- 【ケース1】では、リンク領域の不具合がおきます。それに対し、【ケース2】ではIE/Firefoxを問わず、リンク領域は同様にきっちり<span class="box2">～</span>の箇所になります。 【ケース1】と【ケース2】の違いは、後者は本件の一番の親要素であるaに対して幅を与え、子要素のspanを全てブロック化しているという点です。 【ケース1】だと、ブロック要素・幅無指定（<a href="#" class="block">～）→インライン要素・幅指定（<span class="box">～）→ブロック要素（<span class="block"><img>～<span class="block">タイトル～）という、妙な親子（継承）関係になってしまうので、不具合が出るのだと思われます。 なお、 > a タグを親要素にするブロック構成に無理があるように思いますが という事ですが、現在span.boxに対して設定しているスタイルを親要素のaに対して直接指定すれば、構成がもっと簡潔になると思うのですが。 つまり、上記の【ケース2】と同様の表示結果にしたければ、次の様に置き換えられるという事です。 ---------------------------------------------------------------------- 【HTML】 ---------------------------------------------------------------------- （省略） <h1>【ケース3】</h1> <a href="#" class="box3"> <img src="images/dummy.jpg" alt="ダミー" width="100" height="40" /> <span class="title">タイトル</span> </a> （省略） ---------------------------------------------------------------------- 【CSS】 ---------------------------------------------------------------------- /* ケース3：改良版 */ a.box3 { width: 150px; display: block; background: #fcc; } a.box3 img, a.box3 span.title { display: block; } ---------------------------------------------------------------------- これではいけませんか？ ご希望のスタイルが違うのであれば、span.boxを含め、もう少し周辺情報を詳細に補足して下さい。
お礼
ちょっとなかなかごにょごにょする時間がとれませんで、 放置状態になってしまいそうなので質問を締め切ろうと思います。 ご回答いただきまして、本当にありがとうございます。 おかげさまでなんだか出来るような気がしています。
補足
ご回答ありがとうございます。 span.box は display:block; にしてある箇所で、記載漏れして いました、すみませんでした。 ご指摘いただいた内容をあてはめてごにょごにょしてみますので 進展あり次第またレスしたいと思いますが、取り急ぎ御礼まで申 し上げます。