Firefox不尊重溢出：隐藏

Question

我正在尝试设置一个表单，该表单在两个并排显示的元素之间显示一个垂直分隔符。这些是问题参数：

1. 任何一个元素的高度都是未知的，并且会因为使用JavaScript修改内容以响应用户交互而发生变化。
2. 分隔符应覆盖整个元素的共享垂直边框，而不管在任何给定时间哪个元素更高。

鉴于上述情况，似乎这种设置可以解决问题：

<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隐藏垂直边框的“未使用”部分。

此设置确实在Firefox，Chrome和IE＆gt; = 8（我的兼容性要求）上正常运行（ JsFiddle ）：



但是，当我尝试在我的真实 HTML中应用相同的技术时，Firefox会崩溃并且似乎不尊重父元素上的overflow: hidden设置。因此，无限高的垂直边框会渗透到页面上两个面板之后的所有元素。

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

正确渲染：



Firefox渲染：



我感到非常难过：为什么Firefox会正确显示概念证明并破坏真正的交易？我该如何解决？

Answer 1

我能够通过将fieldset元素更改为div或通过将溢出设置为隐藏的div包围字段集来修复JSFiddle。也许值得一试。 fieldset标记对您的HTML是否必不可少？