如何获得＆＃34;职位：绝对＆＃34;在Firefox工作？

时间：2016-10-15 20:11:37

标签： html css firefox sass flexbox

我最近在网站上遇到了问题。它在Firefox上表现得非常奇怪。样式position: absolute不适用于Firefox。

这是该网站在Chrome上的外观图片： Chrome

这就是Firefox上的样子： enter image description here

正如您所看到的，它在Chrome上看起来是正确的，但在Firefox上，箭头和页脚的切断率为50％。这些元素的位置为position: absolute。 没有浏览器检测，有没有办法解决这个问题？ 这是我的代码：

HTML：

<div id="background"></div>
    <div class="container-fluid">
        <nav class="navbar navbar-default">
            <div class="container-fluid no-hide">
                <ul class="nav navbar-nav hidden-xs" role="navigation">
                    <li id="projects"><a style="font-size: 1.3em"><i class="fa fa-code" aria-hidden="true"></i>My Projects</a></li>
                    <li id="about"><a style="font-size: 1.3em"><i class="fa fa-user" aria-hidden="true"></i>About Me</a></li>
                    <li id="home"><a style="font-size: 1.6em"><i class="fa fa-home" aria-hidden="true"></i>Home</a></li>
                    <li id="skills"><a style="font-size: 1.3em"><i class="fa fa-paint-brush" aria-hidden="true"></i>My Skills</a></li>
                    <li id="contact"><a style="font-size: 1.3em"><i class="fa fa-envelope-o" aria-hidden="true"></i>Contact Me</a></li>
                </ul>
                <ul class="nav navbar-nav visible-xs" role="navigation">
                    <li><a id="projects" style="font-size: 1.3em"><i class="fa fa-code" aria-hidden="true"></i></a></li>
                    <li><a id="about" style="font-size: 1.3em"><i class="fa fa-user" aria-hidden="true"></i></a></li>
                    <li><a id="home" style="font-size: 1.6em"><i class="fa fa-home" aria-hidden="true"></i></a></li>
                    <li><a id="skills" style="font-size: 1.3em"><i class="fa fa-paint-brush" aria-hidden="true"></i></a></li>
                    <li><a id="contact" style="font-size: 1.3em"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </nav>
        <div id="card-info">
            <div class="card text-center" id="home">
                <h1 class="text-capitalize heading">ben allen</h1>
                <hr>
                <h4 class="text-capitalize text">web developer</h4> 
            </div>
        </div>
        <div class="arrow-wrapper">
            <i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"></i>
            <i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"></i>
        </div>
        <footer id="footer">
            <p class="heading">&copy; Ben Allen | All Rights Reserved</p>
        </footer>
    </div>

SCSS：

// Variables
$montserrat     : 'Montserrat', sans-serif;
$open-sans      : 'Open Sans', sans-serif;
$light-black    : #212121;
$mint-green     : #2ECC71;

// CSS
.heading {
    font-family: $montserrat;
}
.text {
    font-family: $open-sans;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -9999;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    #background {
        background: url('../images/background.jpg') no-repeat fixed;
        background-position: 70% 35%;
        width: 100%;
        height: 100%;
        position: absolute;
    }
}
.container-fluid {
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    display: flex;
    padding: 0px auto;
    background-color: rgba (0, 0, 0, 0.3);
}
.card {
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    padding: 7vh;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 2;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
.card:not(.navbar) {

    overflow-y: scroll;
    max-width: 100vh;
}
hr {
    border-top: 1px $light-black solid;
    opacity: 0.2;
}
hr.strong {
    border-top: 1px $light-black solid;
    opacity: 0.45;
}
footer#footer {
    font-weight: 600;
    justify-content: center;
    position: absolute;
    bottom: 0;
    padding: 2vh;
    width: 100%;
    text-align: center;
    z-index: 1;
    p {
        color: $light-black;
        font-size: 1.8rem;
    }
}
i {
    color: $light-black;
    padding: 1vh;
    bottom: 0;
    right: 0;
}
vertical-list {
    list-style: none;
    display: flex; 
    align-items: baseline;
    justify-content: center;
    margin: 0 auto;
    width: auto;
    white-space: nowrap;
    @extend .pull-left;
    width: 100%;
}
a.underline,
a#underline {
    color: $light-black;
    overflow: hidden;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
         -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
}
a.underline::before,
a#underline::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.1em;
    bottom: 0;
    left: 0;
    background-color: $light-black;
    visibility: hidden;
    -webkit-transform: scaleX(0);
       -moz-transform: scaleX(0);
        -ms-transform: scaleX(0);
         -o-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
         -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
}
a.underline::after,
a#underline::after {
    color: transparent;
    -webkit-transition: all 0.3s ease-in-out 0s;
       -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
         -o-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
}
a.underline:hover::after,
a#underline:hover::after {
    color: $light-black;
}
a.underline:hover::before,
a#underline:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
       -moz-transform: scaleX(1);
        -ms-transform: scaleX(1);
         -o-transform: scaleX(1);
            transform: scaleX(1);
}
a.underline:hover,
a#underline:hover {
    color: $light-black;
}
.top {
    position: relative;
    top: 0%;
    bottom: 100%;
}
.bottom {
    position: relative;
    bottom: 0%;
    top: 100%;
}
nav.navbar {
    z-index: 9999;
    height: 5vh;
    cursor: pointer;
    @extend .card;
    padding: 0.5vh;
    font-family: $montserrat;
    justify-content: center;
    position: absolute;
    top: 0.5vh;
    left: 0.5vh;
    right: 0.5vh;
    display: flex;
    text-align: center;
    align-content: center;
    white-space: nowrap;
    ul.nav {
        width: auto;
        white-space: nowrap;
    }
    ul.nav li {
        display: inline;
        * {
            color: $light-black;
            opacity: 0.9;
            -webkit-transition: opacity 0.5s;
            -moz-transition: opacity 0.5s;
            -ms-transition: opacity 0.5s;
            -o-transition: opacity 0.5s;
            transition: opacity 0.5s;
        }
        *:hover {
            opacity: 0.6;
        }
        *:active {
            opacity: 1;
        }
    } 
}
@media only screen and (max-width: 800px) {
    nav.navbar {
        top: 0px;
        right: 0px;
        left: 0px;
        width: 100%;
        ul.nav li * {
            display: inherit;
        }
    } 
    html, body {
        overflow-x: scroll;
    }
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
::-moz-scrollbar {
    width: 0px;
    height: 0px;
}
::-ms-scrollbar {
    width: 0px;
    height: 0px;
}
::-o-scrollbar {
    width: 0px;
    height: 0px;
}
@media only screen and (min-width: 1920px), (min-height: 1080px) {
    div#background {
        background-size: 100%;
    }
}
.notfound-heading {
    font-size: 3.125em;
}
i {
    position: relative;
    z-index: 5;
    color: $light-black;
    opacity: 0.9;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -ms-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
i:hover {
    opacity: 0.6;
}
.left-arrow {
    right: 90%;
    left: 10%;
}
.right-arrow {
    left: 90%;
    right: 10%;
}
.arrow-wrapper {
    position: absolute;
    padding-left: 100px;
    padding-right: 100px;
    width: 100%;
}

提前致谢！

0 个答案:

没有答案
相关问题
最新问题