レアなケースだが、下記の条件を満たすと、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でも正常↓
投稿
8 件のコメント:
まさにこのトラブルで困っていましたが、記事を読んで解決方法が見つかったので助かりました。
ありがとうございます。
匿名さん、こんにちは。
お役に立てて良かったです。^^
同じ問題で困っています。解決方法のヒントをいただけませんでしょうか？
私の場合は、TD要素の中にラベル＆チェックボックスをDBのデータから自動生成しており、ラベルタグのスタイルにwhite-space:nowrapが設定されています。
nowrapするとおっしゃるとおり暴走しますが、nowrapしないとチェックボックスとラベルの間で改行されたりするので困りものです。
ちなみに私の場合は「table要素の親要素がfloatになっている」は当てはまっていないようです。
こんにちは。
うろ覚えで申し訳ないのですが、たしか自分の場合はfloatさせているdiv要素とtable要素の間に、もう1つdiv要素を入れたら回避できたような気がします。
＜div style="float:left"＞
＜table＞
...
＜/table＞
＜/div＞
↓
＜div style="float:left"＞
＜div＞
＜table＞
...
＜/table＞
＜/div＞
＜/div＞
または、（設計上可能なら）nowrapにする要素内の先頭に、問題が起きない要素（a要素など）を入れても回避できると思います。
＞ちなみに私の場合は「table要素の親要素がfloatになっている」は当てはまっていないようです。
↓
そうですか。table要素に限らず、style:blockとかinlineとかそのあたりの関連で発生するのかもしれませんね。
このあたり詳しい情報があるといいんですけどね．．．。
同じ現象で困っていましたが、
CSSハックでIE8のみSPANをdisplay:blockしてfloat:left;で無理矢理回避しました。
/* IE8向け */
head~/* */body .Nowrap{
display:block;
float:left;
}
/*IE8以外は上のプロパティを上書き*/
html:not(:target) .Nowrap{
display:inline;
float:none;
}
IE8 white-space:nowrapが他の要素にも適用されるバグ｜WEBデザイン Tips
ちなみに僕の場合も「table要素の親要素がfloatになっている」は当てはまっていません。
WEBデザインTipsさん、情報ありがとうございます。
なるほど、親要素のfloatは関係なさそうなんですね。
IE8向けのハックによる回避方法も参考になりました。
ありがとうございます。
同じ問題でハマってました。
大変参考になりました。
ありがとうございます。
自分の場合は以下のCSSハックで回避できました。
（WEBデザイン Tipsさんのモノを参考にさせて頂きました。ありがとうございます。）
/* IE8向け */
head~/* */body .Nowrap{
display:inline-block;
}
匿名さんこんにちは。
コメントありがとうございます。
IE9ではバグが直ってるといいですね。
コメントを投稿