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不尊重溢出：隱藏

回答

相關問題