※ ChatGPTを利用し、要約された質問です（原文：IEでCSSによる背景画像の高さが伸びる原因は？）
IEでCSSによる背景画像の高さが伸びる原因は？
このQ&Aのポイント
div内にh2とulでリンクを行っている場合、IEではhightの指定が効かず、divが引き伸ばされてしまうことがある。
borderが指定されている場合、IEではdivが何かによって引き伸ばされるため、背景画像の不要な部分が表示されてしまう。
FIREFOXでは背景画像が綺麗に表示されるが、IEでは問題が発生する。
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>
お礼
ご指摘の通り、hrですね。 マークアップを意識してやっていたので、divの外に設けるルールで作ることにしました。 CSSによる検証ばかりに気を取られていたので、htmlのhrを疑いませんでした。 ご指摘ありがとうございました。