レアなケースだが、下記の条件を満たすと、white-space:nowrapが指定した要素の外にも効力を発揮してしまうようだ。
条件
- nowrapにする要素は、table要素の中にある
- table要素の親要素がfloatになっている
- nowrapにする要素が複数並んでいる
- nowrapにする要素内の先頭には、inputやimg等の要素がある(a要素の場合は問題なかった)
上記の条件を満たすと、nowrapにする要素と次のnowrapにする要素の間も改行されなくなる。
バグが発生するHTMLの例
<style type="text/css">
span{
white-space: nowrap;
}
</style>
<div style="float:left; width:12em; background-color:#fff">
<table>
<tr>
<td>
<span>IE8改行バグの例</span>
<span><input type="text" /></span>
<span><img src="sample.gif" /></span>
</td>
</tr>
</table>
</div>
IE8で表示すると↓spanと次のspanの間のところで改行されず、横にはみ出してしまう。
IE7では正常↓
Firefoxでも正常↓