プロが教えるわが家の防犯対策術！

IEでCSSによる背景画像の高さが伸びる原因は？

解決済

  • 質問者：panperth
  • 質問日時：
  • 回答数：1件

2枚の画像で、リンクを行おうとした場合、
div内にh2とulでリンクを行っています。
ところが、高さ（hight）を全てに指定しているにも関わらず、
divが引き伸ばされて、background-imageの不要な部分まで出てきてしまいます。
borderを入れると全体を挟んでいるDIVが何かによって引き伸ばされていますが、なぜIEだと引き伸ばされているのでしょうか？
FIREFOXだと綺麗に表示されます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>無題ドキュメント</title>
<style>
<!--
*{
margin:0;
padding:0;
}

h2,ul{
text-indent:-9999px;
list-style:none;
}
h2 a{
width:175px;
height:28px;
display:block;
}
ul a{
display:block;
width:175px;
height:24px;
}
ul li{
padding:0;
margin:0;
}
.float_right{
float:right;
}
.mgn_btm7{
margin-bottom:7px;
}
div#NAVIBAR{
width:175px;
margin-top:43px;
height:398px;
background-image:url(image/test-a.gif);
background-repeat:no-repeat;
border:1px #FF0000 solid;
}
h2 a:hover{
background-image:url(image/test.gif);
background-position:0 0;
background-repeat:no-repeat;
height:23px;
}
ul a:hover{
background-image:url(image/test.gif);
background-repeat:no-repeat;
height:23px;
}
ul a#E:hover{
background-position:0 -28px;
}

ul a#F:hover{
background-position:0 -52px;
}

ul a#G:hover{
background-position:0 -76px;
}

ul a#H:hover{
background-position:0 -100px;
}

ul a#I:hover{
background-position:0 -124px;
}

ul a#J:hover{
background-position:0 -155px;
}

ul a#K:hover{
background-position:0 -179px;
}

ul a#L:hover{
background-position:0 -203px;
}

ul a#M:hover{
background-position:0 -227px;
}

ul a#N:hover{
background-position:0 -251px;
}

ul a#O:hover{
background-position:0 -275px;
}

ul a#P:hover{
background-position:0 -299px;
}

ul a#Q:hover{
background-position:0 -323px;
}

ul a#R:hover{
background-position:0 -347px;
}

ul a#S:hover{
background-position:0 -371px;
}



-->
</style>
</head>

<body>
<div id="NAVIBAR" class="float_right">
<h2><a href="#">タイトル</a></h2>
<ul class="mgn_btm4">
<li><a href="#" id="E">ああああああ</a></li>
<li><a href="#" id="F">いいいいいい</a></li>
<li><a href="#" id="G">うううううう</a></li>
<li><a href="#" id="H">ええええええ</a></li>
<li class="mgn_btm7"><a href="#" id="I">おおおおおおお</a></li>
<li><a href="#" id="J">かかかかかか</a></li>
<li><a href="#" id="K">きききききき</a></li>
<li><a href="#" id="L">くくくくくく</a></li>
<li><a href="#" id="M">けけけけけけ</a></li>
<li><a href="#" id="N">ここここここ</a></li>
<li><a href="#" id="O">ささささささ</a></li>
<li><a href="#" id="P">しししししし</a></li>
<li><a href="#" id="Q">すすすすすす</a></li>
<li><a href="#" id="R">せせせせせせ</a></li>
<li><a href="#" id="S">そそそそそそ</a></li>
</ul>
<hr>
</div>
</body>
</html>

「IEでCSSによる背景画像の高さが伸びる」の質問画像
通報する

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

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： riqua
  • 回答日時：

ソースをそのままローカルで試してみました。


微妙に下部の余白が（入ったり入らなかったり）違うのですが、その部分でしょうか…？

IE6、IE7、IE8で検証してみました。
IE6が一番余白が大きく、次いで7。
8はFirefoxと同じ表示になりますね。

ご質問のソースだけで見ると、原因はリストタグの下にある「<hr>」のようです。これがなければ、こちらでは同じ表示になります。

<hr>はブラウザによって実装に微妙な違いがあるので、扱いづらいです。どうしてもということでなければ、<hr>を使わない違った方法で組まれてみてはいかがでしょうか。
（例えば、単純にラインを入れるだけの目的でしたら、<ul>のbottomにborder指定するなど。）
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご指摘の通り、hrですね。
マークアップを意識してやっていたので、divの外に設けるルールで作ることにしました。
CSSによる検証ばかりに気を取られていたので、htmlのhrを疑いませんでした。
ご指摘ありがとうございました。

通報する
お礼日時：2009/07/27 10:46

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報