HTML5，Bootstrap 3.3.7浏览器之间的导航栏和页脚不一致

Question

请您帮我解决以下问题，这里是我编写的网站的一些代码段以及所有主要网络浏览器的输出：

<!-- Bootstrap 3.3.7 -->
<!-- HTML5 Navigation -->
<nav class="navbar navbar-default navbar-fixed-top sticky">

<!-- HTML5 Footer -->
<nav class="navbar navbar-default navbar-fixed-bottom sticky">

<!-- css -->
/* Override Bootstrap navbar styling */
.sticky {
    position: sticky;
    top: 0px; /* When the element reaches top: 10px, it becomes fixed. */
    z-index: 100;
}

/* Begin navbar styling                    */
.navbar { 
    background-image: none;
}

.navbar-default {
    background-color: #006400;
    color:#fff;
    border-radius:0;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
}

.navbar-default .navbar-nav > .active > a {
    color: #fff;
    background-color:transparent;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open >a {
    color: #fff;
    background-color: #33aa33;
    text-decoration: none;
}

.navbar-default .navbar-brand {
    color: #fff;
}

.navbar-default .navbar-toggle {
    background-color:#fff;
}

.navbar-default .icon-bar {
    background-color:#33aa33;
}
/* End navbar styling                      */

Chrome 59.0.3071.115

Edge 38.14393.1066.0

Firefox 55.0b7

歌剧46

Safari 5.1.7

所以我的问题是为什么Edge 38.14393.1066.0和Safari 5.1.7与其他3个网络浏览器如此不同？

Answer 1

感谢@Morpheus，我将CSS更改为以下内容：

/* Override Bootstrap navbar styling */
. sticky {
    position: sticky;
    top: 0px; /* When the element reaches top: 10px, it becomes fixed. */
    z-index: 100;
}

更改为：

/* Override Bootstrap navbar styling */
.rhgh-fixed-top {
    position: fixed;
    top: 0px;
    z-index: 100;
}

.rhgh-fixed-bottom {
    position: fixed;
    bottom: 0px;
    z-index: 100;
}