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

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

2008-05-29 (木)
技術

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宣言は上記コードには含めていません。

【関連する記事】

Comments:0

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, JavaScripter Blog

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

作ったもの

キングボンビーがサイトを侵略する？jQuery Plugin - kingbonbi.js作りました

なんかものが落ちるjQuery Plugin - JDropper作りました

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top