gpt4 book ai didi

html - 表格行中包含 "nowrap"的元素会阻止整行在 IE8 中换行

转载 作者:太空宇宙 更新时间:2023-11-04 15:34:04 25 4
gpt4 key购买 nike

我被迫做一些与 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

因此,将第 3 个元素的 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>

enter image description here

现在整个表格单元格不再换行!

它在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com