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-space第三个元素的样式更改为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

但是，如果进一步缩小窗口，其他元素的问题仍然存在，因此我们也将前两个元素更改为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默认具有）。

PSwhite-space: nowrap问题中描述的错误仍然存​​在于IE 9中。

PS 2. 出于可用性和可访问性的原因，应避免在一行中使用多个单选按钮。应用这个原则，情况不会出现。

于 2012-06-05T04:02:06.457 回答
-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 回答