html - Firefox for Mac 在子元素后面显示滚动条

Question

在 Firefox 25.0.1 和 Firefix 26 for Mac(在 Mavericks 上)中，我遇到了很多问题，Firefox 显示带有 overflow-y:scroll 的 div 子元素后面的滚动条； (或汽车)在他们身上。我创建了一个简单的 JS fiddle 来显示这种行为(下面的代码): http://jsfiddle.net/barts/6y4ce/

如果您开始滚动，#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>

Answer 1

有几种方法可以解决这个问题；一种方法是像以前一样在 container div 中使用 overflow-y 属性，尽管改为使用 content div 中的其他属性。在 html 中，您需要交换 div container 和 header 的位置，并将 content div 嵌套在 中容器 div.

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

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

Example (JSFiddle)