Question

此问题仅发生在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。

当字段集没有显示：内联时，字段集的大小由窗口大小而不是其内容大小决定。因此，如果我将窗口设置得很小或分辨率很低，那么我可以看到内容流到字段集框之外。

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

我只需要使用CSS修复此问题。我可能不会更改HTML，因为这是现有应用程序中无处不在的问题，而且每次更改都需要做大量的工作。发生问题。

非常感谢任何帮助。

谢谢， Tedderz

Answer 1

试试这个：

fieldset {
border: 1px solid #000;
display: inline;
float: left;
clear: both;
}

IE显示问题：字段集大小不是由内容决定的，显示内联会导致其他问题

1 个答案: