fieldset firefox溢出CSS修复答案

【问题标题】：fieldset firefox overflow CSS fixfieldset firefox溢出CSS修复
【发布时间】：2015-04-17 17:28:36
【问题描述】：

如何在字段集中设置内容溢出？它在 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>

【问题讨论】：

我将它粘贴到一个 HTML 文档中，两个框在 Firefox (3.5) 中看起来相同。在 Internet Explorer 中，它们具有不同的内部填充。 CSS 的一个方便的技巧是从没有填充和没有边距的情况下开始所有内容： * {padding:0; margin:0} 并且只应用你需要的，每个浏览器倾向于在元素上放置不同的默认填充和边距。

标签： css

【解决方案1】：

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

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

【讨论】：

完美！谢谢！请注意，您不能浮动字段集。我还制作了一个带有 Opera 支持的展示小提琴：jsfiddle.net/dsHUW/5
谢谢！刚刚确认：这个bug在FF 20.0.1中依然存在，在Safari 5.1.2中也存在。在 Chrome 和 IE 7-10 中运行良好。 display: table-column; 为 Firefox 修复了它，但不是 Safari。 IE 根本不会渲染字段集（必须使用display:block，默认值）。 Chrome 似乎并不关心它是block 还是table-column，无论哪种方式都可以很好地呈现。 See the fiddle（所有测试在 Windows 7 SP1 中完成）
display: table-column; 无法解决 Chrome 36 中的问题

【解决方案2】：

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

【讨论】：

FireFox 32 和 Chrome 36 中仍然存在此错误。
这是一个错误吗？无论如何，它仍然存在于 FF v54.0.1 中 - 只需使用修复 fieldset{display: table-column;} 即可完美运行！
@B4NZ41 在 FF 52.5.3 ESR 中，fieldset{display: table-column;} 不能解决溢出+宽度问题，并且不能用于固定/绝对定位元素（自动转换为 display:block 但看起来像 display:table )。我试过但没有用。坏消息：Chrome 已经“改进”了字段集，使其可以像在 Firefox 中一样工作。很难过。

【解决方案3】：

来自 Emil Björklund 的博客 post：

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

【讨论】：

1000X 是的，谢谢。这应该被接受的答案，另一个不考虑任何其他浏览器，除了 ie 。

【解决方案4】：

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

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

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

【讨论】：