html - 下拉悬停时 Firefox 中的额外像素

Question

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

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

更新

如果 .nav-main 元素上没有 display: table;，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; }

对于回流/重绘/重新渲染来说，其中任何一个都比顶部的疯狂变化更好。此外，如果您想要在页面上重新使用该导航下方的导航，而不仅仅是通过将负顶部发送给它们来“隐藏”内容，它们也会更加健壮。

干杯。