Question

我在我的导航系统上使用了一个下拉菜单，而我的主要UL在Firefox以外的浏览器上缺少一个空白。

使用Firefox，它完美排列。使用IE（10）和Chrome（最新版）它有1px的差距。

以下是我的标题设置方式..如果有人可以提供帮助，那将非常感激。

注意：我的标题是固定标题

    <!-- 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视图中：

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

导航底部的差距

1 个答案: