ボックスの高さがある程度以上縮まりません！

質問

ボックス（div）を使って幅950px、高さ5pxの線を描こうとしています。

htmlに
<div id="box_line"></div>

cssに
#box_line{
height:5px;
width:950px;
background-color:#3B5998;
}

と指定しています。
firefox3で確認するとうまく表示されるのですが、IE6で確認すると高さが10pxくらいになってしまいます。(幅は正常に表示されます)
試しに、height:30px;と指定すると、firefoxでもIEでもしっかりと表示されるのです。
IE6にはボックスの最低高さ制限でもあるのでしょうか？
また、他の方法で同じ線を表現する方法があればお教え下さい。

ちなみにDOCTYPEはstrictに指定しています。

よろしくお願いします。

回答No.1

abril · ベストアンサー

> <div id="box_line"></div>

このままの状態で、IE側の「文字サイズ」を変更してみて下さい。現在はディフォルトの「中」になっているかと思いますが、これを「小」や「最少」とするだけで上記ブロックの高さが減りませんか？つまり、font-sizeが影響しているという事です。なので、font-size: 0;という指定を追加すればお望みの結果は得られます…が。
この方法はお奨めしません。線を引く為だけに何の要素もないブロックを配置する事は論理構造上NGだからです。
もし、ある要素に対して線を引きたいのであれば、その要素のスタイルとしてborderプロパティを使って指定して下さい。

例えば、現在の様な線を引きたい場所の次に出てくるブロックが、以下の様にあったとします。

<p class="hoge">このブロックの上に線が引かれている</p>

であれば、CSSでこの様に指定をします。

p.hoge {
width: 950px;←親ブロックから継承されている場合は省略
border-bottom: solid 5px #3B5998;
}

といった具合です。「線」は「某かのブロックの装飾要素」として考えてみて下さい。そうではなく、論理構造上も明確に「要素と要素の区切り線」という意味を持つものであれば、hrにスタイルを適用（この場合は上記のp.hogeの様な指定とはまた若干異なります）して、hrでマークアップして下さい。

お礼

早速のご回答ありがとうございます！
今回の現象の原因が理解できて、とてもスッキリとしました。
「線」と表現したのが、少し私の間違いで、実際はWebページのナビゲーションメニューのデザインを構成する一部のパーツとして使用しようと考えていました。
abrilさんの意見を参考にして、今回の目的に合わせた最適の方法をもう少し考えてみようと思います。

回答No.4

神崎 渉瑠（@taloo）

> IE6にはボックスの最低高さ制限でもあるのでしょうか？
最低１行分の文字を表示するためのスペース（高さ）が確保されています。

overflow:hidden

を追加してみてください。

線を引くのであれば、その目的にもよりますが、ほとんどの場合は<hr>をおすすめします。

お礼

> 最低１行分の文字を表示するためのスペース（高さ）が確保されています。
なるほど。とても納得がいきました！
こんなシンプルな方法で解決できるのですね。
ありがとうございました！！

回答No.3

yambejp

hrならこんな感じですね

<style>
hr.boxline{
height:5px;
width:950px;
background-color:#3B5998;
border:0px solid;
text-align:left;
margin:0px;
padding:0px;
}
</style>
test
<hr class="boxline" />
test
<hr class="boxline" />
test

お礼

ご回答ありがとうございます。
hrを使用して表現するということは、思いつきませんでした。
参考にさせて頂きます。
ありがとうございました！

回答No.2

abril

すみません、ANo.1にタイポ及び追加情報がありましたので下記に訂正します。

【正】
p.hoge {
（省略）
border-top: solid 5px #3B5998;←ボーダーを上辺に引く、という意味です。
padding-top: 1em;←線の下に続くテキストなどの間に余白を設けたければこの様にpaddingに適切な値を入れて調整して下さい。
}