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

【问题标题】：Bootstrap Navheader Safari Weird Layout on First LoadBootstrap Navheader Safari 首次加载时的奇怪布局
【发布时间】：2017-08-15 07:23:57
【问题描述】：

我在 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;
}

对解决这种奇怪行为有什么想法吗？

【问题讨论】：

标签： html css twitter-bootstrap safari

【解决方案1】：

这似乎是一个 Safari 错误。

我用以下方法解决了：

绝对定位真实标志。
在#path 处添加一个 120 像素（徽标宽度）的左边距

导航栏折叠部分使这变得复杂，折叠时会将#path 转移到徽标中。最简单的解决方案是将#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;
}

【讨论】：

【解决方案2】：

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

再次感谢。

【讨论】：