今日、フルCSSのサイトで奇妙な現象が起きて、かなりはまったので忘れないようにメモ。
現象はというと、IE6で背景をつけたボックスに、見出しと、背景画像を設定してボタン化したリストを「float」で左右に振り分けて表示させるという実装で、ボタンをロールオーバーするとボタンの下側にヘンな余白ができてボックスの高さが変化してしまうというもの。
リロードすると元に戻る。
IE7とFirefoxではそんなこと起きないのに！
IE6のバカーーーーー！
……と、IE6のバカさ加減に八つ当たりしていても仕方ないので原因追求。
ソースは下記の如く。
<div class="box">
<h3 class="mainTitle">タイトル</h3>
<ul id="button">
<li><a href="#">ボタン</a></li>
<ul>
<div>
<h3 class="mainTitle">タイトル</h3>
<ul id="button">
<li><a href="#">ボタン</a></li>
<ul>
<div>
div.box {
background: #ededed;
border: 1px solid #cccccc;
padding10px;
width: 400px;
}
div.box h3 {
width: 340px;
}
div.box ul {
list-style: none;
}
div.box ul li#button {
background: url("/img/button.gif") no-repeat left top;
text-indent: -9999px;
font-size: 0;
height: 14px;
width: 40px;
}
background: #ededed;
border: 1px solid #cccccc;
padding10px;
width: 400px;
}
div.box h3 {
width: 340px;
}
div.box ul {
list-style: none;
}
div.box ul li#button {
background: url("/img/button.gif") no-repeat left top;
text-indent: -9999px;
font-size: 0;
height: 14px;
width: 40px;
}
で、何が悪かったかと申しますと、中に入っている見出しとリストの幅。
これがボックスの幅ぴったりになっていたのが悪かったらしいです。
2段組のレイアウトのときに、左カラムと右カラムの幅を足して、100%にならないようにするのと同じ。
なんか知らないけど、ロードしたときはちゃんと表示するくせに、ロールオーバーするとはみ出すかずれるかする感じで下に余白ができるみたいだ。
ということで、「float: left」と「float: right」で左右に振り分けるときは、「width」の合計値に注意！
