html - 导航底部的间隙

Question

我在我的导航栏上使用下拉菜单，但我的主要 UL 在 Firefox 以外的浏览器上有一个缺口。

对于 Firefox，它可以完美地对齐。对于 IE (10) 和 Chrome(最新)，它有 1px 的差距。

这是我的 header 的设置方式。如果有人可以提供帮助，我们将不胜感激。

注意:我的header是固定header

    <!-- Begin Header -->
    <header role="banner">
        <div class="wrapped">

            <!-- Logo -->
            <a href="<?php echo home_url(); ?>" id="logo"><img src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" alt="" /></a>

            <!-- Main Menu -->
            <nav>


                <?php wp_nav_menu( array( 'menu' => 'Main Navigation')); ?>
            </nav>

        </div>
    </header>
    <!-- End Header -->

和我的CSS:

/* Header Information
-----------------------------------------------------------------*/

header {
    width: 100%;
    height: 64px;
    background: #1c6e86;
    border-bottom: 1px solid #16586b;
    box-shadow: 0px 0px 3px 2px rgba(36, 86, 104, 0.5);
    -moz-box-shadow: 0px 0px 3px 2px rgba(36, 86, 104, 0.5);
    -webkit-box-shadow: 0px 0px 3px 2px rgba(36, 86, 104, 0.5);
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
}

#logo a {
    display: block;
    float: left;
}




/* Navigation 
-----------------------------------------------------------------*/
nav {
    float: right;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    margin: 21px 0 0 0;
    background: #1c6e86; 
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: "";
        clear: both;
        display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #1f4d5e;
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block;
            padding: 10px 15px;
            color: #fff;
            text-decoration: none;
        }


    nav ul ul {
        margin: 0;
        padding: 0;
        background: #1f4d5e;
        position: absolute;
        top: 100%;
    }
        nav ul ul li {
            float: none; 
        }
            nav ul ul li a {
                padding: 10px 20px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #123440;
                }

--编辑--

在浏览器 HTML View 中:

<nav>
    <div class="menu-main-navigation-container">
        <ul id="menu-main-navigation" class="menu">
            <li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-24"><a href="#">Home</a></li>
            <li id="menu-item-171" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-171"><a href="#">Projects <i class="fa fa-angle-down"></i></a>
                <ul class="sub-menu">
                    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">WordPress Themes</a></li>
                    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="#">WordPress Plugins</a></li>
                    <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"><a href="#">Future Projects</a></li>
                </ul>
            </li>
            <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-188"><a href="#">Tuts  <i class="fa fa-angle-down"></i></a>
                <ul class="sub-menu">
                    <li id="menu-item-183" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-183"><a href="#">WordPress</a></li>
                    <li id="menu-item-182" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-182"><a href="#">jQuery</a></li>
                    <li id="menu-item-181" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-181"><a href="#">HTML &amp; CSS</a></li>
                </ul>
            </li>
            <li id="menu-item-187" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-187"><a href="#">Our Blog</a></li>
            <li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>      

我最终会删除 DIV 容器，因为它毫无用处。我没有注意到我忘记通过 nav_menu 调用将其删除。

我忘了说这个间隙是导航区域和 1px 边框之间菜单底部的 1px 间隙。

Answer 1

尝试

nav ul li {
    float:left;
    margin-left:-1px;
}