Question

我正在使用top: 100%按下主菜单栏下方的子菜单下拉列表，但在Firefox中菜单被推到菜单边框下方，导致1px间隙。在webkit浏览器中，它按照我想要的方式工作，它显示子菜单，两者之间没有间隙。我正在使用100％以避免在值中进行硬编码。

我创建了一个codepen进行测试。我将菜单周围的边框设置为红色，以便更容易查看问题。第二个导航只是显示悬停状态。

更新

display: table;元素上没有.nav-main，1px差距就会消失，但我正在使用它，因此我可以将display: table-cell;添加到导航列表项以展开并填充整个导航。关于如何解决这个问题的任何想法？

HTML

<nav role="navigation">
    <ul class="nav-main">
        <li><a href="#">Link One</a></li>
        <li>
            <a href="#">Link Two</a>
            <ul class="sub-menu">
                <li><a href="#">Dropdown Link One</a></li>
                <li><a href="#">Dropdown Link Two</a></li>
                <li><a href="#">Dropdown Link Three</a></li>
            </ul>
        </li>
        <li><a href="#">Link Three</a></li>
        <li><a href="#">Link Four</a></li>
    </ul>
</nav>

SCSS

$pink: #ed2490;

a {
    text-decoration: none;
}

.nav-main {
    position: relative;
    display: table;
    margin: 0;
    padding: 0;
    width: 100%;
    border: 1px solid lighten(black, 22%);
    border-radius: 4px;
    background: lighten(black, 8%);
    @include background(linear-gradient(bottom, lighten(black, 8%), lighten(black, 36%)));
    font-weight: 500;
    line-height: 1;

    > li {
        display: table-cell;
        text-align: center;
        position: relative;

        &:hover {
            .sub-menu {
                top: 100%;
            }

            a {
                background: lighten(black, 18%);
                background: rgba(black, 0.25);
            }
        }
    }

    a {
        display: block;
        color: white;
        padding: 15px 10px;

        &:hover,
        &:focus {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }
    }

    .sub-menu { // dropdown
        position: absolute;
        top: -999px;
        z-index: 10;
        margin: 0;
        padding: 0;
        width: 200px;
        background: lighten(black, 4%);

        li {
            border-top: 1px solid lighten(black, 18%);

            &:first-child {
                border-top: 0;
            }
        }

        a:hover {
            background: $pink;
        }
    }
}

// For example only
.styleguide-dropdown {
    padding: 40px 20px 130px;
}

.nav-main {
    border-color: red;

    .psuedo-hover {
        a {
            background: lighten(black, 18%);
            background: rgba(black, 0.25);
        }

        .sub-menu {
            top: 100%;

            .psuedo-hover {
                background: $pink;
            }
        }
    }
}

Answer 1

不寒而栗，任何带有display：table- *的东西本来就很难在浏览器中保持一致的风格。

但是，那说，它真的不是你的问题。以下修复工作：

.submenu { display:none;}
:hover > .submenu { display: block;}

或

.submenu { height: 0; overflow:hidden }
:hover > .submenu { height: auto; }

对于回流/重绘/重新渲染，其中任何一个都应该比顶部的疯狂变换更好。此外，如果你想在页面上重新使用导航器，它们会更加强大，而不会通过向负顶部发送它们来“隐藏”它们。

干杯。

Answer 2

删除ul周围的1px边框可解决问题;然后，您可以为每个li添加顶部和底部边框。虽然border-radius不会以同样的方式计算。

我认为原因是ul的高度超过li的高度，这个2px的边框，因此li的高度的100％是不够的......但我真的不确定这个。

这是一个有效的演示：http://codepen.io/anon/pen/jsBEt

下载悬停时firefox中的额外像素

2 个答案: