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

Question

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

这是我的实时网站的链接:http://arkelectronics.ca/请注意:一旦我修复了问题，此链接将不会在未来显示问题。

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

我的导航栏的 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

像这样改变它:

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 上运行良好，希望它对你有好处。