我被迫做一些与 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>
因此，将第三个元素的 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>
但是，如果进一步缩小窗口，其他元素的问题仍然存在，因此我们还将前两个元素更改为 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 中却不能。有任何想法吗？谢谢!
最佳答案
您可以使用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>
查看此working example !
这样就不会发生换行，并且如果窗口变得非常小，换行仍然有用。
关于html - 表行中带有 "nowrap"的元素会阻止整行在 IE8 中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10889601/