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

Question

我在使用 bootstrap 导航 header 的 Safari 中看到一个奇怪的布局。这有时只会出现在第一页加载时。刷新页面会给出正确的布局（打开一个新的 window 并粘贴到 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

这因导航栏折叠部分而变得复杂，折叠时会将 #path 转移到徽标中。最简单的解决方案是将 #path 包装在另一个 .navbar-brand class、#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;
}

Answer 2

感谢您提出这个问题并提供您的解决方案。我将 "float: left" 添加到我的第二个标签中，它成功了。

再次感谢。

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

Bootstrap Navheader Safari Weird Layout on First Load

html

css

safari

twitter-bootstrap