2

私はIE8と互換性のあるいくつかの開発を行うことを余儀なくされています。

このコードから始めると、ウィンドウが縮小すると、テーブルがラジオボタンからテキストを分離する方法でテキストを折り返すことがわかります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html><body>
<table style="border-collapse:collapse; border:1px solid black"><tr>    

<td style="border-collapse:collapse; border:1px solid black">
    Foo
</td>

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

</tr></table>
</body></html>

dfd

したがって、white-space3番目の要素のスタイルをに変更nowrapすると、問題が解決するようです。これで、ラジオボタンとすべてのテキストが強制的に折り返されます。

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:normal"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

fd

ただし、ウィンドウをさらに縮小すると、他の要素でも問題が解決しないため、最初の2つの要素も次のように変更しますnowrap。

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar
    </label>
</td>

ここに画像の説明を入力してください

これで、テーブルセル全体が折り返されなくなりました。

Firefoxでは正しく動作しますが、IE8では動作しません。何か案は？ありがとう！

4

3 に答える 3

3

floatその問題を解決するために使用できます。

<td style="border-collapse:collapse; border:1px solid black;">
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
  <label style="float:left;"><input type="radio" />
    Bar Bar Bar Bar Bar Bar Bar
  </label>
</td>

この作業例を参照してください！

このようにラップは発生せず、ウィンドウが非常に小さくなった場合でも、ラップは有用であることがわかります。

于 2012-06-04T23:23:01.600 に答える
2

の代わりにwhite-space: nowrap、

label { display: inline-block; }

最近のサポートdisplay: inline-blockはかなり普遍的です（このような場合、要素はdisplay: inlineデフォルトで持っています）。

PS質問で説明されているバグはwhite-space: nowrap、IE9にもまだ存在します。

PS 2.使いやすさとアクセシビリティの理由から、1行に複数のラジオボタンを配置することは避けてください。この原則を適用すると、状況は発生しません。

于 2012-06-05T04:02:06.457 に答える
-1

これを試してください-ラベルの最後にすでに末尾の空白（改行はスペースとして扱われます）があるため、他のすべては無視されます（折りたたまれます）が、1つは折り返すことができません（したがって、単にそれを斧します）：

<td style="border-collapse:collapse; border:1px solid black">
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar</label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar</label>
    <label style="white-space:nowrap"><input type="radio" />
        Bar Bar Bar Bar Bar Bar Bar</label>
</td>
于 2012-06-04T23:14:45.227 に答える