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を無くすと一発で直るんだけどやっぱりバグなんだろうか
p.descriptionにwidth指定すれば直るかも