Question

嗨，我遇到了一些WordPress主题开发问题。我正在与Underscores合作制作我自己的主题，并且我已经整合了基金会5.我的愿景是从顶部出现一个非画布的网站菜单。从逻辑上讲，我想将导航器移动到标题和站点描述之上，而不是默认位于下面，所以我正在编辑header.php。这是标题标记之间的代码：

    <header id="masthead" class="site-header" role="banner">
        <nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'ibeyi' ); ?></button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
        </nav><!-- #site-navigation -->

        <div class="site-branding">
            <?php if ( is_front_page() && is_home() ) : ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <?php else : ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
            <?php endif; ?>
            <p class="site-description"><?php bloginfo( 'description' ); ?></p>
        </div><!-- .site-branding -->
    </header><!-- #masthead -->

以下是它正在吐出的HTML（来自Chrome开发工具）：

<header id="masthead" class="site-header" role="banner">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
        <div class="menu"><!--menu truncated for sake of brevity; your regular ul, li scene--></div>
    </nav><!-- #site-navigation -->

    <div class="site-branding">
                        <h1 class="site-title"><a href="http://localhost/ibeyi_theme/" rel="home">Ibeyi Theme</a></h1>
                    <p class="site-description">Just another WordPress site</p>
    </div><!-- .site-branding -->   
</header>

你可以看到我搬出了以前的位置，这位于div.site-branding之内。但出于某种原因，我应用这种造型

.site-branding{
    background-color: grey;
}

它的效果让导航灰色背景！无论出于何种原因，导航仍然表现得好像是.site-branding！从技术上讲，我可以通过专门为导航设置一组例外来解决这个问题，但似乎更容易找到发生这种情况的原因。我并不完全理解WP PHP一直在吐出的东西，所以也许这与它有关。有谁知道为什么会这样？

Screenshot

更新：从评论中我们推断出nav元素本身没有将lightgrey定义为其背景颜色。相反，出于某种原因，.site-branding div似乎永远延伸到顶部。 .site-branding正在拾取比它需要更多的高度，虽然它没有边距或填充，并且它没有从其父元素继承它的高度，因为它们的高度略有不同。为了说明div如何达到顶峰无论如何，这里是我的情况截图.site-branding的高度降低了：

Screenshot—reduced height

nav和.site-branding都是position：static，并且在向下滚动时退出页面顶部，就像它们应该的那样。由于某些原因，它被卡在顶部，虽然它在滚动时就像静态元素一样。它甚至可以让它的内容溢出底部，以便它可以一直到达顶部。最后一个有趣的注意事项：如果我给它一个顶部边缘它将脱离顶部，但这是我能够做到目前为止的唯一方法，它似乎是一个解决方案，只是避免了问题。我想知道为什么它正在做它正在做的事情。

还是个谜。我发现我甚至不打算使用这种导航方案，但我真的好奇为什么会发生这种情况并想知道，以防万一我将来遇到这样的问题。

Div覆盖兄弟元素并且没有明显的原因具有额外的高度

0 个答案: