溢出：隱藏在Firefox或Opera中不起作用
[英]overflow:hidden not working in Firefox or Opera
問題描述
我試圖隱藏側邊欄上的溢出，以便在頁面滾動並顯示下方的側邊欄時可以產生很好的視覺效果（這將是相同的，但是具有不同的字體顏色，圖像等）。
它在Safari和chrome中可以正常工作，但在Firefox或Opera中卻不能。
我對此進行了廣泛的研究，但答案與我要達到的目標無關。 似乎該問題可能是由於overflow：hidden不能很好地與position：fixed一起玩。
我是否確實缺少一些明顯的東西，是否有解決方法？
代碼如下：
div#latest { background: #1a1a19; position: relative; top: 0; left: 0; width: 100%; overflow: hidden!important; ; z-index: 2 } div#latest div#latestslides { position: relative; top: 0; left: 0; width: 100%; height: 100% } div#latest div#latestslides div.slide { width: 100%; height: 100vh; background-size: cover; background-position: center; position: relative; opacity: 1; } /* sidebar */ div.sidebar { width: 350px; height: 100%; position: fixed; left: 0; top: 0; overflow: hidden!important; z-index: 1; } .content { background-color: #FC0; }
<body> <!-- Main --> <div id="main"> <!-- Start latest --> <div id="latest"> <div class="sidebar"> <div class="nav" id=""> <div class="sections" style="color:pink"> <p>THE CONTENT ABOVE</p> <p>THE CONTENT ABOVE</p> <p>THE CONTENT ABOVE</p> <p>THE CONTENT ABOVE</p> <p>THE CONTENT ABOVE</p> <p>THE CONTENT ABOVE</p> </div> </div> </div> <div id="latestslides" style="background-color:black"> <div class="slide" style="background-image:url(images/banner.jpg);"></div> <div class="slide" style="background-image:url(images/banner.jpg);"></div> </div> </div> <!-- End latest --> <!-- Start B Sidebar --> <div class="sidebar"> <div class="nav" id=""> <div class="sections" style="color:orange"> <p>THE CONTENT BELOW</p> <p>THE CONTENT BELOW</p> <p>THE CONTENT BELOW</p> <p>THE CONTENT BELOW</p> <p>THE CONTENT BELOW</p> <p>THE CONTENT BELOW</p> </div> </div> </div> <!-- End B sidebar --> <!-- Portfolio--> <section id="portfolio" style="margin-left:350px;"> <div class="container"> <header> <h2>content</h2> </header> <p style="font-size:28px; line-height:30px;">Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. </p> </div> </section> </div><!-- End Main --> </body>
2 個解決方案
解決方案1
0 2015-10-20 19:57:06
您的側邊欄具有固定位置，可將其移出文檔流。 從本質上講，它不再是具有隱藏溢出的元素的子級。 顯然，瀏覽器對此的處理方式有所不同。
您需要使用其他結構來限制可見內容，既不包含固定元素，也不包含嵌套在固定側邊欄中的元素。 您似乎在復制內容，因此無論如何，另一種方法可能會更好。 在“粘性側欄”中尋找想法。
解決方案2
0 2015-10-21 09:44:35
這是我在您的精彩站點上找到的解決方案，它使用剪輯，並且可以在所有主流瀏覽器中使用，甚至IE8！ http://jsfiddle.net/lmeurs/jf3t0fmf/
注意：在移動設備上，頂部元素僅在滾動釋放時隱藏。
body { font: 14px arial; } .parent-container { position: relative; width: 300px; height: 200px; } .parent { position: absolute; width: 300px; height: 200px; background-color: yellow; clip: rect(0, auto, auto, 0); } .child { position: fixed; top: 50px; left: 50px; padding: 1em; background-color: red; } .child.pink { background-color: pink; }
<div class="child pink">Fixed positioned element</div> <div class="parent-container"> <div class="parent"> <div class="child red">Fixed positioned element</div> </div> </div> <h1>Workaround to clip fixed positioned element to parent</h1> <p>For more details see <a href="http://stackoverflow.com/a/23859719/328272">our answer</a> at StackOverflow's question "<a href="http://stackoverflow.com/a/23859719">parent & child with position fixed, parent overflow:hidden bug</a>".</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p> <p>Dummy text to cause scrollbars</p>
CSS文本溢出：省略號; 正在使用Firefox但在谷歌瀏覽器和Opera瀏覽器的下拉列表中沒有工作？
[英]CSS text-overflow: ellipsis; is working in Firefox but not working in drop down list in Google Chrome and Opera browsers?
UL溢出隱藏在firefox和ie jquery選項卡中都不起作用
[英]UL overflow hidden is not working in both firefox and ie for jquery tabs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.