0

css、htmlに詳しい方、教えてください！
画像、テキストをまとめて<a></a>の中にいれ、その中でfloatをした時、IEでは、img要素の部分だけがクリックしてもリンクできません。（google chromeでは機能します） 具体的にはメインの画像を左にフロートさせ、テキスト（背景画像あり）、他の画像（バナーのようなサイズ）を右側に配置し、全体を<a>でくくり、リンクしています。＜ａ＞にblockを指定し、マウスオーバーで全体の背景が変化するように設定しております。
タグは下記の通りです。

<div class="obkkn"><a href="リンク先/page.html">
<div class="obkkn2"><div class="obt2"><b>タイトル○○○○</b></div><h2 class="obkkn2">サブタイトル□□□□</h2></div>
<div class="obkknleft"><img src="ＪＰＧ画像" border="0"></div>
<div class="obkknright2">
<div class="obkkk">
<div class="obkl"><img src="ＧＩＦ画像" border="0"></div><div class="obkr"><img src="ＧＩＦ画像"></div>
</div>
<div class="ti">概要</div>
<div class="obpr"><img src="ＧＩＦ画像" border="0"></div>
</div>
</a>
</div>


ＣＳＳ（外部ファイル）

.obkkn{width:760px;
margin-top:40px;
text-align:left;}

.obkkn a{text-decoration:none;
display:block;
background-image:url("bimg/bh.gif");
background-repeat:no-repeat;
background-position:left;}

.obkkn a:hover{text-decoration:none;
display:block;
background-image:url("bimg/bh.gif");
background-repeat:no-repeat;
background-position:right;}


.obkkn2{width:760px;
height:25px;}

.obt2{width:517px;
float:left;
font-family:HG明朝B;
height:25px;
text-align:left;
padding-left:3px;}


.obkknleft img{width:420px;}

.obkknleft{text-align:left;
float:left;}


h2.obkkn2{width:240px;
height:25px;
margin:0px 0px 0px 517px;
padding-left:0px;
padding-top:5px;}

.obkknright2{text-align:right;
width:335px;
padding-top:5px;
margin-left:420px;}

.tiseki{background-image:url(ti2.gif);
background-repeat:no-repeat;
background-position:bottom;
margin-top:10px;
height:20px;
padding-left:100px;
text-align:left;}

.obpr{width:330px;
padding-top:10px;
height:100px;｝

質問者が選んだベストソリューション

Yahoo!知恵袋 5644日前