IE7で表示すると画像に隙間があきます。

質問

WEBサイトを作っているのですがIE７で表示すると
画像と画像の間にスペースが出来てしまいます。
他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？

HTML
<div id="sidebar">
<div id="sidebar-bg"> </div>
<div id="image-navigation">
<div class="navi">
<ul>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li>
<li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li>
</ul>
</div>
</div>
</div>

CSS
#sidebar{
width: 200px;
float: left;
}

#sidebar-bg{
background-color: #FFF;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity:0.5;
position:absolute;
left:0;
top:42px;
z-index:-1;
width: 200px;
height:100%;
}

ul,
li {
margin:0;
padding:0;
list-style:none;
}

#image-navigation ul li a {
display:block;
width:200px;
}

回答No.2

naokita · ベストアンサー

まずは、
#image-navigation ul li a img{ border: none;}
は不要かな？

a を blockにすると、ありえないbottomが出てくるから、
#image-navigation ul li a img{ vertical-align: bottom;}
で良いと思うよ。
block の場合、a に　heightも入れると確実かな。

つまり、
#image-navigation ul li a img{ border: none; vertical-align: bottom;}

ハックでもよいけどね。
----------------------------

imgじゃない場合は、
全liを一行設定にしたり、
IE7用ハックで、{ float:left;}か、zoom:1;　かな

お礼

ありがとうございます！
とても分かりやすく解決しました。

回答No.1

ORUKA1951

HTMLもCSSもこんな複雑な書き方したら、後で泣きますよ。HTMLは文書構造だけ、プレゼンテーションと住み分けを徹底しましょう。そうすると将来、あるいはスマホ用にメニューを、そのまま、あるいは横に並べたくなってもHTMLは触らなくて良いです。

[HTML]タブは全角スペースに置換してある。
<div class="header">
　　<h1>タイトル</h1>
</div>
<div class="section">
　　<h2>本文見出し</h2>
　　<p>本文記事</p>
　　<div class="section">
　　　　<h3>見出し</h3>
　　</div>
　　<div class="nav">
　　<ul>
　　　　　　<li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li>
　　　　　　<li><a href="B.html" title="○○"><img src="images/test2.png" width="200" height="35" alt="○○" /></a></li>
　　　　　　<li><a href="C.html" title="○○"><img src="images/test3.png" width="200" height="35" alt="○○" /></a></li>
　　　　　　<li><a href="D.html" title="○○"><img src="images/test4.png" width="200" height="35" alt="○○" /></a></li>
　　　　　　<li><a href="E.html" title="○○"><img src="images/test5.png" width="200" height="35" alt="○○" /></a></li>
　　　　　　<li><a href="F.html" title="○○"><img src="images/test6.png" width="200" height="35" alt="○○" /></a></li>
　　　　</ul>
　　</div>
</div>
<div class="footer">
　　<h2>文書情報</h2>
</body>
</div>

[CSS]
html,body{margin:0;padding:0;width:100%;height:100%;}/* html,bodyの余白を消す */
/* 全体の配置 */
div.section h2,div.section p,div.section div.section{
margin:0 auto 0 210px;
width:auto;
}
div.section h2{line-height:2em;}
div.nav ul,div.nav ul li{
display:block;list-style:none;
margin:0;
padding:0;
}
/* ナビゲーション */
div.section div.nav{
width:200px;height:100%; /* ナビのサイズ */
position:absolute;/* 絶対配置(基準はstatic以外の親ブロック) */
top:0;left:0;/* 位置 */
background-color: #FFF;/* 背景 */
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity:0.5;
}
div.nav ul{
width:100%;/* 巾(基準はstatic以外の直近の親ブロック) */
}
/* 万が一画像が読み込まれないときのため */
div.nav ul li{
line-height:39px;
}
div.nav ul li+li{
line-height:35px;
}

div.nav ul li a{
display:block;/* blockに変更 */
width:100%;height:100%;/* サイズ(基準はstatic以外の直近の親ブロック)*/
text-decoration:none;
out-line:none;
/* border:outset 2px gray ;*//* 枠が必要なら(liのサイズをborder巾分小さくする) *
}
/* 画像もブロックにしておく(liサイズに合うように) */
div.nav ul li a img{border:none;display:block;width:100%;height:100%;}

/* 他の部分 */
html,body{background-color:silver;}
div.header,div.section,div.footer{
width:80%;
margin:0 auto;
background-color:rgb(220,220,220);
}
div.header h1,div.footer h2{
margin:0 auto;line-height:2em;}
}
div.header,div.footer;{min-height:100px;}
div.section{min-height:300px;position:relative;}

/* ナビを横にしたけりゃ
div.header,div.footer;{min-height:100px;}
div.section{min-height:300px;position:relative;}
div.section div.nav{
width:100%;
text-align:center;
}
div.section div.nav li{
display:inline-block;
width:16%;
}
div.section h2{padding-top:20px;}
div.section h2,div.section p,div.section div.section{
margin:0 auto;
*/

以上
floatにすると、文書構造も変える必要がでてくるのでabsoluteにしてある。
リストを横並びにするときは、li{display:inline;}として、ul{text-align:center;}が良い。その場合改行やタブを<!---->でコメントアウトする。
[例]
　　<ul>
　　　　　　<li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li><!--
　　　　--><li><a href="A.html" title="○○"><img src="images/test1.png" width="200" height="39" alt="○○" /></a></li>
[CSS]下記を追記するだけで横になるはず
div.section div.nav{
width:100%;
}
div.section div.nav li{
display:inline-block;
}