チェックボックスとラベルが一列に並べられた大きなグループを含む HTML フォームがあります。2 番目の物理的な行に折り返すのに十分な大きさです。を使用して改行を禁止するスパンで各ペアをラップすることにより、各ラベルがチェックボックスの横にあることを確認しようとしています(次の行の先頭にラベルがあるチェックボックスで終わる最初の行ではなく) white-space: nowrap。
これは機能しますが、副作用を引き起こします。
Chrome では、許容される場所で行が壊れていますが、少し遅すぎます。最初の行に 7 個のチェックボックスとラベルを配置する余地がある場合、そこに 8 個を配置し、親要素の右側の境界線からはみ出してから、次の行の 9 番目のペアに進みます。
IE9 では、行はまったく途切れず、巨大なオーバーフローとして終了します。
http://jsfiddle.net/pmhrx/1/は IE の問題を示しており、それを作成しているときに、奇妙な回避策を偶然発見しました: 終了タグの前に要素間の空白がない場合</span>、IE は改行を正しく追加します! フィドルで div2 と div2a を参照してください。それらの唯一の違いは余分な空白であり、IE ではまったく異なる方法でレンダリングされます。
ここで何が起こっているのか、どうすれば適切に修正できますか? （すべてを正確なピクセル幅に強制したり、手動で行を分割したりするようなハッカーはしないでください - チェックボックスのリストは動的です）