display blockのレイアウトが崩れます

質問

IEでみると、左のメニューのボタン部分が
高さが圧縮され、表位置も左よりになってしまいます。
何故崩れるのか原因がわかりません。
よろしくお願いいたします。

ul#menu {
float: left;
width: 150px;
height: 40px;
list-style: none;
color: #585262;
background-color: #ffffff;

}
ul#menu li {
display: block;
margin: 0;
padding: 0;
font-size: small;
line-height:0px;
}
ul#menu li span {
display: block;
font-size: x-small;
}

li#c01 a { background: url(../images/navi/c01.jpg) 7px 5px no-repeat; }
li#c02 { background: url(../images/navi/c02.jpg) 7px 5px no-repeat; }
li#c03 a { background: url(../images/navi/c03.jpg) 7px 5px no-repeat; }
li#c04 a { background: url(../images/navi/c04.jpg) 7px 5px no-repeat; }
li#c05 a { background: url(../images/navi/c05.jpg) 7px 5px no-repeat; }
li#c06 a { background: url(../images/navi/c06.jpg) 7px 5px no-repeat; }
li#c07 a { background: url(../images/navi/c07.jpg) 7px 5px no-repeat; }
li#c08 a { background: url(../images/navi/c08.jpg) 7px 5px no-repeat; }
li#c09 a { background: url(../images/navi/c09.jpg) 7px 5px no-repeat; }

ul#menu li a {
display: block;
height: 40px;
padding: 5px 7px 5px 66px;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
color: #aa8f78;
border: solid 2.5px;
border-color:#ebdbd7 pink pink #ebdbd7;
background-color: #ffdce8;
line-height:normal;
}
ul#menu li a:hover {
color: #794c2c;
background-color: #eee9e2;
}
ul#menu li#c02 {
padding: 5px 7px 5px 66px;
border-bottom: 1px dotted #ffffff;
height: 40px;
line-height:normal;

}

ul#menu li#c09 a {
border-bottom: none;
}

回答No.2

abril · ベストアンサー

頂いた追加情報で再現して検証してみました。
少々起きている現象の表現にわかりにくい部分がありますので、Firefox等で表示させた時との差などを考察した上の回答です。もし、解釈違いがあるなら補足して下さい。
また、下記で「IEでは」と限定している現象については、このDOCTYPE宣言下のモードによるものです。モードが違えばまた解釈も違ってきますので、予めお断りしておきます。

「IEでみると、左のメニューのボタン部分が」
【1】
> 高さが圧縮され、

要は、メニューの各ボタンの背景画像として使用しているc01.jpg～c09.jpgの高さ35pxの全貌が表示されず、途中で切れた状態になってしまう、という状態の事でしょうか？
ボタンの高さを決める為の、ul#menu li aに指定されている、"min-height: 40px;"ですが、このmin-heightプロパティがIEでは非対応となっています。min-heightプロパティは「要素の生成するボックスの最小の高さ（これ以上は低くしない設定）を設定」をする役目を担いますので、Firefox等のこのプロパティを実装しているブラウザ上では、この場合であればul#menu li aの内包する要素であるテキスト部分がどれほど微々たるボリュームであっても必ず40pxの高さのレンダリング領域を確保してくれます。その為、背景画像の高さ35pxよりは常に大きい高さとなり、結果、背景画像は全体が表示されます。

しかし、このプロパティに対応していないIE上では、ボタンの高さは内包する要素のfont-size、line-height、padding、marginといったものとテキストのボリュームだけに依存してしまう為、常に可変状態となってしまいます。現状の様に、少ないテキスト量ですと”相対的に”背景画像の高さ32pxよりもメニューのボタンの領域の方が小さくレンダリングされてしまうので、背景画像の下の方が切れて表示されてしまう事になります（あくまで「背景」として扱われている状態の画像には、高さや幅を指定する事はできませんので）。

この場合の回避策としては、逆にIEのheightプロパティのバグを利用した指定をhackなどで適用対象を振り分けてやる方法などがあります。本来、heightで高さを指定しまうと、内包する要素の高さが”相対的に”に超えてしまった場合の処理が必要になってきてしまう（溢れた部分を「はみ出して表示」させるのか、「表示しないで隠してしまう」のか、「スクロールバーを出して表示させる」のか）ものですで、min-heightとは使い方・使う局面が異なります。しかし、IEでは仮にheightプロパティで指定した高さを内包要素の方が上回ってしまったとしても、内包要素の領域に合わせて勝手に高さを伸ばしてレンダリングします。つまり、本来min-heightプロパティが行う様な解釈をするのです。

なので、IEだけに適用される様な指定の仕方で"height: 40px;"を追加してやります。実は、その為のCSS hackが既にこのCSSファイルには用意されています。一番下から2番目のこの部分です↓

/* Hides from IE-mac \*/
* html ul#menu li a, * html ul#menu li {
height: 40px;
line-height: 1.5;
}
/* End hide from IE-mac */

ここで指定されているプロパティは、記述の仕方のトリックにより、（Mac版除く）IEにのみ適用される、という状態になります（hackについては詳細を省きますので、ググるなどして調べて下さい）。ただし、これを見るとお気づきの様に、ここで既に"height: 40px;"と指定されているにも関わらず、IEでは高さが足りない状態で表示されていますよね。

これは、heightにpaddingが併用されている時のボックスモデルのレンダリング領域の解釈も、IEでは独自解釈が行われてしまっている為です。Firefox等の仕様に添った解釈をするブラウザでは、現状の様に、min-height: 40px;、padding: 5px 7px 5px 66px;、と指定されている場合、レンダリングする高さは40px（最少の高さ）＋5px（上パディング）＋5px（下パディング）となり、結果的に50px（以上）となります。しかし、IEでは上下パディングの値を高さ40pxの「中に含めて」しまう為、レンダリング領域が40pxにしかなっていないのです。なので、40pxに更に本来の上下パディング値の合計である10pxを足してやらねばなりません。従って、下記の様になります。

/* Hides from IE-mac \*/
* html ul#menu li a, * html ul#menu li {
height: 50px;←修正
（省略）
}
/* End hide from IE-mac */

【2】
> 表位置も左よりになってしまいます。

これも「表位置」というのがちょっと意味不明なお言葉ですが、親要素である<div id="all">～</div>の領域の左端のピンクのボーダーまでぴったり余白なくくっついてしまう、という状態の事でしょうか？もしそうであるなら、ul#menuの直近の親要素である#contentに指定してある左右marginのauto値が、これまたIEでは無効（＝値が"0"と解釈される）になってしまう為です。

回避策の1つとして簡単なものに、逆にIEのバグを活かした"text-alin: center;"を親要素に追加してやる、という手があります。なんでそうなるのかという説明は省きますのでCSSの解説サイトなどをご覧になって把握されておく事をお奨めします。現状のCSSファイルのbodyに対する"text-alin: center;"の指定がまさにその意図で使われています。要は、このbodyと#allの関係への対応策と同じ事を、#allと#contentに対しても施してやる、という事です。
ただ、この回避策を施すと、"text-alin: center;"が子要素のインライン要素に全て継承されてテキストなどがセンタリングされてしまいますので、必ず必要なところで"text-align: left;"を指定して、本来の値（左寄せ）がインライン要素に適用される様に上書きしておく必要があります。

#all{
（省略）
text-align: center;←追加
}
#content {
text-align: left;←追加
}

おわかり頂けましたでしょうか？
長くなりましたが、「何故崩れるのか原因がわかりません。」との事でしたので、最低限の説明をさせて頂きました。

なお、蛇足ですが、現状ではIE以外は<div id="all">～</div>の領域から子要素がはみ出してしまう状態になっていますので、floatの解除についても対応しておいた方がよろしいかと存じます。

補足

わかりやすい解説ありがとうございました。
レイアウトがどのように崩れるかは、ご想像の通りです。
説明していただいた通り変更してみたら、ちゃんと表示されました。
なんとお礼を申し上げてよいやら…
ほんとうにありがとうございました。

floatの解除はhtml側のfloat要素の直後
に<br clear="all" />を入れるという方法でよいのでしょうか。

何度もすいません。

回答No.3

abril

ANo.1-2です。

> floatの解除はhtml側のfloat要素の直後に<br clear="all" />を入れるという方法でよいのでしょうか。

それでもクリアされます。本件であれば、<div id="content">の閉じタグの直前に<br clear="all" />を挿入すればIE以外で起きているはみ出した状態は解消されます。ただ、brの本来の役目はインライン要素の途中で強制改行を入れる為のものですから、こういう使用法は（個人的には）あまりお奨めはしません。近年よく使用される手法として、所謂clearfixと呼ばれるtipsがあります。これは、フロートした子要素を抱える親要素の方に所定のスタイルを指定する事で、子要素のフロート状態をクリアさせるやり方です。「CSS　clearfix」というキーワードででもググってみて下さい。いくらでもサンプルが得られます。

お礼

とてもわかりやすい解説ありがとうございました。
clearfixで検索してやってみました。
おかげさまでなんとか形になってきました。
一人でいろいろと調べてもわからず、壁にぶち当たっていたので
非常に感謝しております。

回答No.1

abril

肝心のHTMLソースがないので、どういうレイアウトをイメージされているのかが今一不鮮明ですが…想像できる範囲では、以下の様なマークアップなのかとは思います。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link rel="stylesheet" href="css/hoge.css" type="text/css" media="all">
</head>

<body>

<ul id="menu">
<li id="c01"><a href="#"><span>c01</span></a></li>
<li id="c02"><a href="#"><span>c02</span></a></li>
<li id="c03"><a href="#"><span>c03</span></a></li>
<li id="c04"><a href="#"><span>c04</span></a></li>
<li id="c05"><a href="#"><span>c05</span></a></li>
<li id="c06"><a href="#"><span>c06</span></a></li>
<li id="c07"><a href="#"><span>c07</span></a></li>
<li id="c08"><a href="#"><span>c08</span></a></li>
</ul>

</body>
</html>

CSSは質問者様のものをそのまま貼り付け（※各liの背景画像として指定されているイメージ・ファイルの縦横サイズが不明なので、背景画像がテキスト（リンク）に対してどの様に配置される事を期待しておられるかという部分はわかりかねますが）検証してみました。その結果は、IEやFirefoxを問わず実に奇妙なものになりますが…？

> IEでみると、左のメニューのボタン部分が高さが圧縮され、表位置も左よりになってしまいます。

これどころではない、というか…。
実は検証する以前にCSSだけを見た段階から「？」な指定が見受けられました。

■親要素であるul#menuの高さを"height: 40px;"としているにも関わらず、その子要素であるaの高さも"height: 40px;"としてしまっていますね。liは8つありますので、40px×8＝320pxとなり、親要素の高さを思いっきりはみ出してしまっています。IE6ではその様な場合”本来の仕様に反して”親要素の高さも内包する子要素の高さまで伸びてしまいますが、Firefoxなど仕様に準じたレンダリングをするブラウザでは、ulの背景色である白は40pxの高さで表示は終わってしまいます。
■liに"display: block;"という指定をされていますが、liの初期値は"display: block;"ですので、この時点でわざわざ指定する必要はありません。
■ul#menu li、ul#menu li span、ul#menu li a、のfont-sizeやline-heightに関する指定を見ると、テキストリンクの表示のさせ方をどう意図されているのか疑問です。とりあえずテキスト部分を非表示にさせたいわけではなそうですが…

等々です。

さておき、より”質問者様と同じ現象を再現できる”検証をする為には、少なくとも以下の追加情報が必要かと思われます。

・HTMLのソース（DOCTYPEも必須）
・背景画像の縦横サイズ
・<ul id="menu">～</ul>の親要素（少なくとも<body>は存在していますが、それ以外にもあるのであれば含めて）に対してCSSでスタイルを指定しているなら、その部分も。継承により、子要素の表示結果が変わってくる場合がありますので。

補足

ありがとうございます。
htmlは以下のようになっています。
画像の縦横サイズは、縦35px 横42px　です。

---------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head><meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta name="generator" content="">
<title>ページ</title>
<link rel="stylesheet" href="css/version4.css" type="text/css" />
<link rel="stylesheet" href="css/test.css" type="text/css" />
<link rel="stylesheet" href="css/import.css" type="text/css" media="screen,print" />

<style type="text/css">
a { text-decoration:none; }
a:link { color: #ff6b8d; }
a:visited { color: #9a90a0; }
a:hover { color: #ffa1d7; }
</style>

</head>

<body>

<div id="all">

<div id="header"></div>

<div id="content">

<div id="main">

<div id ="image">
<img src="images/c.jpg" border=0 width=620 height=480 align="center" alt="画像"></div><BR>
</div>

<ul id="menu">
<li id="c01"><a href="index.html">トップ</a></li>
<li id="c02">A</li>
<li id="c03"><a href="XXX">B</a></li>
<li id="c04"><a href="XXX">C</a></li>
<li id="c05"><a href="XXX">D</a></li>
<li id="c06"><a href="XXX">E</a></li>
<li id="c07"><a href="XXX">F</a></li>
</ul>

</div>

<p id="footer"><img src="images/title.gif"alt="XXX" id="example1" />　XXXXXXX
<span>XXXX</span> XXXXX</p>

</div>
</body>
</html>

height に関して、一部変更させていただきました。申し訳ありません。

---------------------------------------------
@charset "Shift_JIS";

body {
text-align: center;
color: #585262;
background: url(../images/d.jpg);
font-size: small;
}

body div {
text-align: left;
margin: 0 auto;
}

* {
margin: 0;
padding: 0;
}

#all{

border:solid 1px pink;
background-color:#ffffff;
width: 810px;
margin-left:auto;
margin-right:auto;

}

#header {
height: 130px;
color: #ffc8cf;
background: #ffffff url(../images/back-header.jpg) no-repeat center;

}

#content {
margin: 0 auto;
width: 790px;
}

#main {
float: right;
width: 620px;
margin: 0;
font-size: small;
}

ul#menu {
float: left;
width: 150px;
list-style: none;
color: #585262;
background-color: #ffffff;

}
ul#menu li {
display: block;
margin: 0;
padding: 0;
font-size: small;
line-height:0px;
}
ul#menu li span {
display: block;
font-size: x-small;
}

li#c01 a { background: url(../images/navi/c01.jpg) 7px 5px no-repeat; }
li#c02 { background: url(../images/navi/c02.jpg) 7px 5px no-repeat; }
li#c03 a { background: url(../images/navi/c03.jpg) 7px 5px no-repeat; }
li#c04 a { background: url(../images/navi/c04.jpg) 7px 5px no-repeat; }
li#c05 a { background: url(../images/navi/c05.jpg) 7px 5px no-repeat; }
li#c06 a { background: url(../images/navi/c06.jpg) 7px 5px no-repeat; }
li#c07 a { background: url(../images/navi/c07.jpg) 7px 5px no-repeat; }
li#c08 a { background: url(../images/navi/c08.jpg) 7px 5px no-repeat; }
li#c09 a { background: url(../images/navi/c09.jpg) 7px 5px no-repeat; }

ul#menu li a {
display: block;
min-height: 40px;
padding: 5px 7px 5px 66px;
border-bottom: 1px dotted #ffffff;
text-decoration: none;
color: #aa8f78;
border: solid 2.5px;
border-color:#ebdbd7 pink pink #ebdbd7;
background-color: #ffdce8;
line-height:normal;
}
ul#menu li a:hover {
color: #794c2c;
background-color: #eee9e2;
}
ul#menu li#c02 {
padding: 5px 7px 5px 66px;
border-bottom: 1px dotted #ffffff;
min-height: 40px;
line-height:normal;

}

ul#menu li#c09 a {
border-bottom: none;
}

/* Hides from IE-mac \*/
* html ul#menu li a, * html ul#menu li {
height: 40px;
line-height: 1.5;
}
/* End hide from IE-mac */

.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */