Home > 技術 > IEでliにpadding-bottomを入れたときに色が覆いかぶさる

IEでliにpadding-bottomを入れたときに色が覆いかぶさる

IE6.0とIE7.0でしか起こらないのだが、ちょっぴりヘンテコなバグっぽいのでハマってしまったのでメモメモ。

divタグの中にulタグとliタグが入っていて、そのliにpadding-bottomが掛かっていた場合にliを含めているdivタグの背景色がスクロールしたときにはみ出してしまう。
あえてスクロールバーを出すために一つdivタグを用意しているが、そこは今回のとは特に関係はありません。
問題なのはその下にあるclass="navi"で指定しているdivタグだ。

ダメなパターン

<style>
<!--
* {
padding: 0px;
margin: 0px;
}
div.navi {
padding-bottom:15px;
}
div.wrap {
background-color:#ECFBDE;
}
.wrap2 {
padding-bottom:10px;
}
-->
</style>
<!-- スクロールさせたいため -->
<div style="margin-top: 800px;">
</div>
<div class="navi">
	<div class="wrap">
		<ul>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
		</ul>
	</div>
</div>
<div class="navi">
	<hr>
</div>

なんとか解決する方法?みたいなものを発見したので以下にメモしておく。

とりあえずうまくいくパターン

<style>
<!--
* {
padding: 0px;
margin: 0px;
}
div.navi {
padding-bottom:15px;
/* width:800px; */ /* widthを入れるとうまくいく */
}
div.wrap {
background-color:#ECFBDE;
/* border: 1px solid; */ /* borderを付けるとうまくいく */
}
.wrap2 {
padding-bottom:10px;
}
-->
</style>
<!-- スクロールさせたいため -->
<div style="margin-top: 800px;">
</div>
<div class="navi">
	<div class="wrap">
		<ul>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
			<li class="wrap2">あああああ</li>
		</ul>
	</div>
</div>
<div class="navi">
	<hr>
</div>

あんまり正攻法とは言えないが、以下のことを実施すると背景色がはみ出るのが防げた。
borderをつけるほうはborderを使わないパターンの時には使えないのでwidthが有効だろう。

  • widthを入れるとうまくいく
  • borderを付けるとうまくいく
  • そもそもpadding-bottomを付けなければうまくいく

なんかこれ以外にもいい方法がありそうだが、今のところ発見できなかった。

Internet Explorer (Windows) CSSバグリストを見ても見当たらなかったので、今後もハマりそうな予感大!
クロスブラウザ対応は大変っすね。特にIE!
なお標準モード、互換モードどちらもでもなりました。なのでDOCTYPE宣言は上記コードには含めていません。

Trackback:0

TrackBack URL for this entry
http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1021
Listed below are links to weblogs that reference
IEでliにpadding-bottomを入れたときに色が覆いかぶさる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > IEでliにpadding-bottomを入れたときに色が覆いかぶさる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top