Question

我不知道这里发生了什么，但是如果你去网站我正在这里工作LINK: 54.191.89.210并刷新几次，你会偶尔看到导航将加载到标题上正确和其他时候它将在标题下方创建一个空白区域并在其下方加载。 PIC（http://s11.postimg.org/7aozzs943/Screen_Shot_2014_08_27_at_2_55_38_PM.png）世界上发生了什么事？

这是我的标题HTML

<div class="header">
    <div class="home-menu pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
        <a class="pure-menu-heading" href=""><img class="pure-img logo" src="img/logo.svg" width="250px"></a>

        <ul>
            <li><a href="#">Books</a></li>
            <li><a href="#">Speaking</a></li>
            <li><a href="#">About Os</a></li>
            <li><a href="#">Public Statements</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      <div class="cf"></div>
    </div>
</div>

这是css

    .pure-menu-fixed {
        position: relative;
    }

    .home-menu.pure-menu.pure-menu-open.pure-menu-horizontal.pure-menu-fixed {
        height: 150px;
        background: #7c0e0e;
    }

    .pure-menu.pure-menu-horizontal>ul li a {
        color: #fff;
        text-transform: uppercase;
        font-size: 1.3em;
        font-weight: 300;
    }

    .pure-menu.pure-menu-horizontal>ul li a:hover {
        background: transparent;
        color: #a18d36;
    }

    .pure-menu.pure-menu-horizontal>ul {
        float: right;
        line-height: 150px;
    }

    .pure-menu.pure-menu-horizontal>ul li:last-child {
        margin-right: 100px;
    }

    .pure-menu.pure-menu-horizontal>ul li:nth-child(n+2)  {
        border-left: 1px solid #fff;
    }

    a.pure-menu-heading {
        line-height: 140px;
    }

    img.logo {
        margin: 23px 0 0 100px;
    }

    .pure-menu li a {
        padding: 5px 40px;
    }

Answer 1

我不知道为什么它是随机的，但这个文件：

http://54.191.89.210/css/A.style.css.pagespeed.cf.m6uWtqO1vC.css

覆盖你的高度.home-menu.pure-menu.pure-menu-open.pure-menu-horizontal.pure-menu-fixed（？！）用100px而不是150px，我猜这不是足够的垂直空间来容纳你的ul，所以它向下移动。

如果你把它排除在外，也许你不会再遇到这个问题了。

Answer 2

想出来......出于某种原因必须将display:table添加到UL ..无论如何，现在正在工作！

导航在标题下随机颠簸

2 个答案: