<style type="text/css">
.Nowrap{
white-space: nowrap;
}
</style>
<table>
<tr>
<td>
<span class="Nowrap"><input type="checkbox"></span>
<span class="Nowrap"><input type="checkbox"></span>
<span class="Nowrap"><input type="checkbox"></span>
</td>
</tr>
</table>
このようなソースで、SPANが全て横に長くなっていってしまう。.Nowrap{
white-space: nowrap;
}
</style>
<table>
<tr>
<td>
<span class="Nowrap"><input type="checkbox"></span>
<span class="Nowrap"><input type="checkbox"></span>
<span class="Nowrap"><input type="checkbox"></span>
</td>
</tr>
</table>
これの回避策としてIE8ではwhite-space:nowrapをあきらめ、IE8のみCSS Hackでdisplay:block;とfloat:leftすることで回避した。
/* IE8向け */
head~/* */body .Nowrap{
display:block;
float:left;
}
/*IE8以外は上のプロパティを上書き*/
html:not(:target) .Nowrap{
display:inline;
float:none;
}
head~/* */body .Nowrap{
display:block;
float:left;
}
/*IE8以外は上のプロパティを上書き*/
html:not(:target) .Nowrap{
display:inline;
float:none;
}
若干ズレたりする部分も出てしまうが、この辺は致し方ない所。
floatingdays: IE8で特定の条件で white-space: nowrapが暴走するバグでは発生条件に触れられているが、あてはまったのは
- nowrapにする要素は、table要素の中にある
- nowrapにする要素が複数並んでいる
- nowrapにする要素内の先頭には、inputやimg等の要素がある
