Question

如何在fieldset中设置内容溢出？它适用于IE，但不适用于FF。

我可以在两个浏览器中使用div元素实现相同的功能。

样品：

<fieldset style="border:thin solid #990033;">
    <legend>test</legend>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</fieldset>
<p>&nbsp;</p>
<div style="border:1px solid #999999; padding:0 8px 8px 8px;">
    <label style="background-color:#FFFFFF; padding:0 5px; position:relative; top:-10px;" >test</label>
    <div style="background-color:#0033FF; height: 30px; width:800px;" >FIXED DIV</div>
</div>

Answer 1

找到解决方案，添加条件css样式：

fieldset {
    display: table-column;
}
<!–[if IE]>
fieldset {
    display: block;
}
<![endif]–>

Answer 2

这实际上是Firefox中的一个错误，它存在了将近8年。：d https://bugzilla.mozilla.org/show_bug.cgi?id=261037

Answer 3

来自EmilBjörklund的博客post：

body:not(:-moz-handler-blocked) fieldset {
  display: table-cell;
}

Answer 4

你不需要溢出内容！在IE（6）中，默认情况下，“fieldset”标签没有填充，在FF中它有！这就是为什么你有不同的行为！

您可以重置字段集的填充（padding：0px;），但在这种情况下，在FF中，标签看起来不太好！要解决此问题，您可以重置字段集的填充底部，并将“margin-left：-12px”应用于字段集内的div。但是，这解决了FF的问题，但在IE中产生了问题！

所以，我的建议是使用条件CSS语句向每个浏览器应用正确的样式规则！

fieldset firefox溢出CSS修复

4 个答案: