IE8 white-space:nowrapが他の要素にも適用されるバグ

TABLE内でwhite-space:nowrapを指定したSPANの先頭にINPUTがあるソースで、white-space:nowrapが他の要素にも適用され、横に長くなってしまったときの回避策。
<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が全て横に長くなっていってしまう。

これの回避策として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;
}

若干ズレたりする部分も出てしまうが、この辺は致し方ない所。

floatingdays: IE8で特定の条件で white-space: nowrapが暴走するバグでは発生条件に触れられているが、あてはまったのは

  • nowrapにする要素は、table要素の中にある
  • nowrapにする要素が複数並んでいる
  • nowrapにする要素内の先頭には、inputやimg等の要素がある
の3つのみ。
posted by digital-squad at 2010年01月16日 19時14分 | Comment(0) | TrackBack(0) | CSS
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/138476800
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック