html - 首次加载时 Bootstrap Navheader Safari 奇怪的布局

Question

我在使用 Bootstrap 导航 header 的 Safari 中看到一个奇怪的布局。这有时只会出现在第一页加载时。刷新页面会给出正确的布局(打开一个新窗口并粘贴 url 会相当一致地触发不正确的布局。)

这是当前布局的图片:

这是我有时重新打开页面时的布局:

我希望链接部分与品牌位于同一行，位于右侧。

这里是相关的 html(我尽量减少它):

<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle" data-target=
        "#collapser" data-toggle="collapse"
        type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" id="brand">
                <img src=
    "http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
    style="height: 40px">
                </a>
                <ul class="navbar-nav pull-left" id="path">
                    <li>
                        <a href="link">a link</a>
                    </li>
                </ul>
            </div>
            <div id="collapser" class="collapse navbar-collapse">
                <a class="navbar-right btn btn-default" id="navbar-login">login</a>
            </div>
        </div>
    </nav>
</header>

还有样式:

#brand {
    line-height: 50px;
    padding: 0 1.2rem;
    padding-right: 0;
    width: 120px;
}

#path {
    list-style: none;
    margin: 0;
    padding-top: 16px;
    padding-left: 0;
}

#path li {
    float: left;
}

#path  li:before {
    content: "/";
    padding: 0 0.6rem;
}

关于解决这种奇怪行为的任何想法？

Answer 1

这似乎是 Safari 的一个错误。

我用下面的方法解决了它:

• 绝对定位真正的标志。
• 向 #path
添加 120px( Logo 的宽度)左边距

这因导航栏折叠部分而变得复杂，它会在折叠时将 #path 转移到 Logo 中。最简单的解决方案是将 #path 包装在另一个 .navbar-brand 类中，#path-nav 在这里。最后，Firefox 需要 path-nav 才能使用 float: none。

这是修改后的工作示例:

<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle" data-target=
        "#collapser" data-toggle="collapse"
        type="button">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" id="brand">
                <img src=
    "http://upload.wikimedia.org/wikipedia/commons/f/f1/Android_sample.svg"
    style="height: 40px">
                </a>
                <div id="path-nav" class="navbar-brand">
                    <u id="path">
                        <li>
                            <a href="link">a link</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="collapser" class="collapse navbar-collapse">
                <a class="navbar-right btn btn-default" id="navbar-login">login</a>
            </div>
        </div>
    </nav>
</header>

.

#brand {
    line-height: 50px;
    padding: 0 1.2rem;
    padding-right: 0;
    width: 120px;
    position: absolute;
}

#path {
    list-style: none;
    margin: 0;
    margin-left: 120px;
    padding-top: 4px;
    padding-left: 0;
}

#path li {
    float: left;
}

#path li:before {
    content: "/";
    padding: 0 0.6rem;
}

/* for firefox */ 
#path-nav {
    float: none;
}