Firefox爲Mac顯示子元素背後的滾動條

在Firefox 25.0.1和Firefix 26爲Mac（在小牛），我遇到了很多問題與Firefox顯示子元素的div後面的溢出y的滾動條：滾動; （或自動）。我創建了一個簡單的JS小提琴是（下面的代碼）顯示了這種行爲： http://jsfiddle.net/barts/6y4ce/Firefox爲Mac顯示子元素背後的滾動條

如果你開始滾動，在#toolbar DIV將重疊的滾動條，其中有一個的z-index：20就可以了。如果我取出z-index，那麼滾動條將正確顯示在工具欄上。但是，如果我離開z-index並在#container div上設置一個，則將它設置爲更高或更低的數字並不重要，滾動條總是位於工具欄下方。

我是否缺少一些簡單的東西？在Safari和Chrome中，滾動條總是顯示在頂部。

<style type="text/css"> 

    * { 
     box-sizing:border-box; 
     -moz-box-sizing: border-box; 
    } 

    #container { 
     width:500px; 
     height:500px; 
     background:#ccc; 
     overflow-y:scroll; 
    } 

    #toolbar { 
     background:#efefef; 
     position:relative; 
     z-index:20; 
     width:100%; 
     padding:20px; 
     height:50px; 
    } 

    </style> 


    <div id="container"> 

     <div id="header"> 

      <h1>Test</h1> 

      <div id="toolbar"> 

      </div> 
     </div> 

     <div id="content"> 

      <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p> 

      <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 

      <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p> 

      <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 


      <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p> 

      <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 


      <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p> 

      <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 


      <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam id dolor id nibh ultricies vehicula ut id elit. Etiam porta sem malesuada magna mollis euismod.</p> 

      <p>Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p> 

     </div> 

    </div>

來源

2013-12-23 Bart S.

發生了什麼事Lorem存有？ – Cilan

@ManofSnow，我使用這個名爲[LittleIpsum]（http://littleipsum.com/）的Mac程序，可以讓我生成不同的程序。 :) –

有幾種方法可以解決這個問題;一種這樣的方式是使用container div中的overflow-y property，如前所述，但使用content div中的其他屬性代替。在html中，您需要交換container和header的位置，並將content div嵌套在container div內。

#container { 
    width:500px; 
    height:500px; 
    background:#ccc; 
    overflow-y:scroll; 
} 

#content { 
    background:#ccc; 
    z-index:1; 
    position:relative; 
}

Example (JSFiddle)

來源

2013-12-23 04:11:58

嗨，謝謝你的回覆。對於我使用的容器，從容器中取出寬度並不實際。此外，它似乎問題仍然存在，我把寬度：100％;關閉#toolbar div。請參閱此JSFiddle：http://jsfiddle.net/6y4ce/40/ –

@BartS。，您也可以將寬度和高度屬性移回到容器中。重要的是在容器中使用'overflow-y：scroll'和div的嵌套 - [看看]（http://jsfiddle.net/6y4ce/46/）。 –

@lll在你的例子中，我只看到overflow-y：我已經滾動了。並且存在一些問題......在Firefox中，內容區域現在與滾動條重疊，而在其他瀏覽器中則有一個水平滾動條。 –

讓position: relative父（溢出）元素和z-index儘可能，只是嘗試設置更多的則子元素，例如z-index: 999999

來源

2014-10-04 23:13:11 nikoloza

Firefox爲Mac顯示子元素背後的滾動條

回答

相關問題