0

此问题仅在 IE8+ 中出现。它在 Firefox 中运行良好。

HTML：

<fieldset>
<legend>Hello</legend>
<table><tbody><tr>
<td>Hello World</td><td>Hello World</td>
<td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td>
</tr></tbody></table>
</fieldset>

<fieldset>
<legend>Hello</legend>
<table><tbody><tr>
<td>Hello World</td><td>Hello World</td>
<td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td><td>Hello World</td>
</tr></tbody></table>
</fieldset>

CSS：

fieldset {
    border: 1px solid #000;
    /*display: inline;*/
}

请查看这个jsFiddle。

当字段集没有 display: inline 时，字段集的大小由窗口的大小而不是其内容的大小决定。因此，如果我将窗口缩小或分辨率较低，那么我可以看到内容在字段集框之外流动。

将 display: inline 添加到字段集可解决此问题。但是，它会导致另一个问题。现在，如果窗口非常大，那么两个字段集将并排显示。我希望每个字段集都显示在自己的行上。

我只需要使用 CSS 来解决这个问题。我可能不会更改 HTML，因为这是一个在现有应用程序中随处出现的问题，而且要更改每次出现的问题都需要大量的工作。

任何帮助将不胜感激。

谢谢，泰德兹

4

1 回答 1

2

尝试这个：

fieldset {
border: 1px solid #000;
display: inline;
float: left;
clear: both;
}
于 2012-11-01T22:44:56.213 回答