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指定すれば直るかも