第一页加载时的CSS问题 - Bootstrap 3

Question

当我的页面第一次加载时，导航链接的上边距为100％，但是当我刷新页面时，它们会向上移动到应有的位置。这只发生在Chrome和Safari（WebKit）中。我正在使用Bootstrap 3和Laravel 4以及less.css。

CSS

.navbar {
    background-color: @gray-darker;
    height: 79px !important;
    border: none;
    font-family: @headings-font-family !important;
    font-weight: 500 !important;
    color: @green1;
    box-shadow: 0 0 4px 0 gray;
    @media (max-width: @screen-sm) {
        height: 60px !important;
    }
    @media (max-width: @screen-xs) {
        height: 48px !important;
    }
    @media (max-width:480px) {
        .navbar-fixed-top {
            position: relative;
        }
    }
    .navbar-right {
        margin-top: 0px;
        padding-top: 0;
        padding-right: 3%;
        padding-left: 3%;
        margin-right: 0%;
    }
    .navbar-logo {
        width: 215px;
        margin-top: 1%;
        margin-left: 10%;
        @media (max-width: @screen-lg) {
            margin-top: 1.5%;
            margin-left: 0;
        }
        @media (max-width: @screen-sm) {
            width: 180px;
        }
        @media (max-width: @screen-xs) {
            width: 140px;
            margin-left: 0;
            margin-top: 6px;
        }
    }
    .navbar-logo:hover {
        opacity: .9;
    }
    .nav>li {
        a {
            font-size: 130%;
            font-weight: 500;
            color: @green1;
            text-align: center;
            margin: 10px 50px 0 0 !important;
            width: 50%;
            padding: 5px 0 0 0 !important;
            @media (max-width: @screen-lg) {
                padding: 10px;
                font-size: 118%;
                margin: 10px 10px 0 0 !important;
                width: 60%;
            }
            @media (max-width: @screen-md) {
                margin: 7px 0px 0 0 !important;
                padding: 5px;
                padding-top: 10px;
                font-size: 98%;
                width: 95%;
            }
            @media (max-width: @screen-sm) {
                padding: 0px;
                padding-left: 0;
                margin: 0;
                margin-top: 9px !important;
                font-size: 95%;
            }
            @media (max-width: 500px) {
                font-size: 95%;
            }
            @media (max-width: 482px) {
                font-size: 88%;
            }
            @media (max-width: 478px) {
                font-size: 120%;
                margin-top: 13px;
                text-align: center;
                padding: 0;
                background-image: none;
            }
        }
        a:hover, a:active {
            color: white;
            background-color: transparent;
            @media (max-width: @screen-xs) {
                background-color: @green1;
                color: @white1;
                border: solid 1px @green1;
            }
        }
    }
    .navbar-toggle {
        // icon margin-top: 0%;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 4px;
        padding-top: 14px;
        padding-bottom: 12px;
        border: none;
    }
    .menu {
        color: @green1 !important;
        font-size: 116%;
        border: solid 1.5px @green1;
        padding: 2px 2px 2px 2px;
        border-radius: 5px 5px 5px 5px;
    }
    @media (max-width:@screen-xs) {
        .navHeaderCollapse {
            height: 100%;
            float: right;
            background-color: @gray-darker;
            opacity: 1;
            border: none;
            width: 190px;
        }
    }
}
// Close nav styling

HTML

<nav class="navbar-inverse navbar navbar-fixed-top ">
    <div class="container"> <a href="/">
          <img class="navbar-logo" src="logo"/>
        </a>

        <button class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse"> <span class="menu">menu</span>

        </button>
        <div class="collapse navbar-collapse navHeaderCollapse navbar-right" id="navHeaderCollapse">
            <ul class="nav navbar-nav ">
                <li class=""> <a href="/link" class="">link</a>

                </li>
                <li class=""> <a href="/link" class="">link</a>

                </li>
                <li class=""> <a href="/Link" class="">Link</a>

                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

在Chrome和safari中，here对我来说效果很好。顺便问一下，你能给我一个你网站的现场演示网址吗？