[IE7]不自然な横スクロールバーが出るバグについて

15年前

IE7だけで変な横スクロールバーが出たので調べてみたらどうやらバグみたいだったんだけど、発生条件が違ってたのでサンプル作ってみた。

IE7とその他のブラウザで比較してみて欲しい…
Sample »

親要素(div#masthead)にposition:relative
さらにその子要素(p.description) に position:absolute　と　leftまたはright値
その子要素(p.description)内で改行している（またはdisplay:blockしてる要素がある）
font-style:italic;をスタイルシートのどこかで使っている（位置関係無し）

<div id="header">
	<div id="masthead">
		<p class="banner"><a title="HOME" class="siteName" href="index.html">Site Name</a></p>
		<p class="description"><strong class="i">Internet Exproler 7</strong><br/>
Scroller-x Bug Test</p>
	</div>
</div>

.i {font-style:italic;}

div#header {
	height:100px;
	background-color:#ccc;
}
#masthead {
	position:relative;
}
p.description {
	position:absolute;
	left:160px;
	background-color:#99FFFF
}

このケースだとleftをrightにするとさらに酷い事に…。
font-style:italicを無くすと一発で直るんだけどやっぱりバグなんだろうか

シェア