Firefox不尊重溢出：隐藏

我试图设置一个窗体，显示并排显示两个元素之间的垂直分隔符。这些是问题参数：Firefox不尊重溢出：隐藏

任何元素的高度都是未知的，并且会因用户交互响应而改变JavaScript的内容。
分隔符应该覆盖整个元素的共享垂直边界，而不管哪个元素在任何给定时间碰巧都会更高。

鉴于上面看来，这种设置会做的伎俩：

<div>This is some text on top.</div> 
<ol> 
    <li id="a">Lalalala</li> 
    <li id="b">Lololol</li> 
</ol> 
<div>And some text on the bottom.</div>

CSS

ol { overflow: hidden } 
li { float: left; width: 5em; padding: 4px } 
div { clear: both } 

#a { background: gold; min-height: 100px } 
#b { background: yellow; border-left: 1px black dotted } 
#b { padding-bottom: 400px; margin-bottom: -400px } /* "infinitely" tall */

的想法是，第二个元素变为“无限高”通过应用底部填充并得到一个左边界;通过抵消具有负底部边距的填充物，将跟随该组的元素带回原始位置;并通过给父母overflow: hidden隐藏垂直边框的“未使用”部分。

这种设置确实工作正常（JsFiddle）在Firefox，Chrome和IE> = 8（我的兼容性要求）：

Proof of concept

然而，当我尝试采用同样的技术在我real HTML火狐浏览器崩溃，似乎无法兑现在父元素上设置的overflow: hidden。因此，无限高的垂直边框将在页面上的两个面板之后的所有元素中流出。

Here是（简体）真实复制/粘贴内容的JSFiddle，以及显示问题的实际CSS规则。请注意，只有Firefox不正确处理这个;其他浏览器继续正确显示它。

正确的渲染：

Correct render

Firefox的渲染：

Firefox render

我难倒正确：为什么火狐正确显示概念证明和别别扭扭真正的交易？我该如何解决它？

来源

2013-12-09 Jon

您是否尝试过搜索功能？ http://stackoverflow.com/questions/1673346/fieldset-firefox-overflow-css-fix http://stackoverflow.com/questions/19025873/how-come-overflowhidden-works-on-a-div-but -not-a-fieldset-in-firefox – Jarno

@Jarno有趣的链接。这个其他问题可能指向一个相关的错误，但解决方案/解决方法似乎并不明显。目前的问题对我来说依然有效。 –

@Jarno：其实我有，但没有后见之明，在搜索中应该包含“fieldset”并不是一目了然 - 它可能会过滤出真正有趣的结果。无论如何，谢谢你的贡献。 – Jon

我能够通过将fieldset元素更改为div来解决您的JSFiddle问题，或者通过将具有溢出设置为隐藏的div的fieldset包围。也许值得一试。 fieldset标记是否对您的HTML至关重要？

来源

2013-12-09 21:17:06 devonnigelreed

感谢您的输入。该字段是必不可少的，不会改变。用另一个元素围绕它可以解决问题，但它引入了额外的标记，在这种情况下这是不合需要的。我可能会使用另一种解决方案，但在一般情况下，这可能很好。 – Jon

Firefox不尊重溢出：隐藏

回答

相关问题