导航栏在悬停时向下推送内容

Question

我网站上的导航栏有问题，尤其是 <a> 元素及其悬停状态。我在我的整个网站上使用 box-sizing: border-box，并且当 <a> 元素悬停时，它们的边框会动画化。然而，问题是当它们悬停时，它们会以某种方式将主要内容向下推（高度比应有的增加了大约 0.33 像素）。 <a> 元素的高度设置为 44 像素，但是当鼠标悬停时，它会以某种方式增加超过此限制 0.33 像素并将内容下推。这有点难以解释，所以我制作了一个简短的视频来详细说明我的问题，请在此处查看：https://youtu.be/iEyVXqoQV74

这里有一个 link 到我的实时网站：http:// arkelectronics.ca/ 请注意：这个 link 将不会在我修复后显示问题。

您可以在 GitHub 的“pre_fix_Whosebug”分支上查看我网站的所有文件（修复前）：https://github.com/Twinbird24/ark_electronics/tree/pre_fix_Whosebug

我的导航栏 HTML：

<nav>
    <ul>
        <li><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="services.html">services</a></li>
        <li><a href="contact.html">contact</a></li>
    </ul>
</nav>

我的导航栏的关联 CSS：

nav li a {
    height: 44px;
    color: white;
    padding: 0px 8px 0px 8px;
    text-decoration: none;
    background-color: transparent;
    border-bottom: 0px solid #ededed; /* will be animated-in on hover */
    border-top: 0px solid orange; /* will be animated-in on hover */
    transition: border 200ms; /* the transition is applies to the border only, at a speed of 200ms */
    display: table-cell; /* this, as well as the vertical-align, ensures text is vertically centered every time inside the nav buttons*/
    vertical-align: middle;
}

/* when nav button is hovered over */
nav li a:hover {
    border-bottom: 13px solid #ededed;
    border-top: 13px solid orange;
}

/* when the mouse is held down on nav button */
nav li a:active {
    border-bottom: 5px solid #ededed;
}

Answer 1

在您的 css 的第 81 行将高度更改为 51 像素 nav li a { 背景颜色：透明； border-bottom: 0 solid #ededed; border-top: 0 实心橙色；白颜色; 显示：table-单元格；高度：51px；填充：0 8px；文字装饰：none；过渡：边界 200ms 缓和 0s；垂直对齐：中间； }

Answer 2

改成这样：

nav ul {
    list-style-type: none; /* removes the bullet-point that's common with ul elements */
    margin: 0;
    padding: 0; 
    overflow: hidden;
}

我添加了 overflow: hidden; 属性因为在 IE10 上有一个错误。

然后像这样：

nav li a {
    height: 45px;
    color: white;
    padding: 0px 8px 0px 8px;
    text-decoration: none;
    background-color: transparent;
    border-bottom: 0px solid #ededed; /* will be animated-in on hover */
    border-top: 0px solid orange; /* will be animated-in on hover */
    transition: border 200ms; /* the transition is applies to the border only, at a speed of 200ms */
    display: table-cell; /* this, as well as the vertical-align, ensures text is vertically centered every time inside the nav buttons*/
    vertical-align: middle;
}

我改了 height 属性。现在在 IE10 上运行良好，希望它对你有好处。

导航栏在悬停时向下推送内容

Navigation bar pushes content down on hover

html

css

hover

navbar