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

你的css第81行

将高度改为51像素 nav li a { 背景颜色：透明; border-bottom：0 solid #ededed; border-top：0纯橙色; 白颜色; 显示：table-cell; 身高：51px; 填充：0 8px; text-decoration：none; 过渡：边界200ms缓和0s; vertical-align：middle; }

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

导航栏在悬停时将内容下推

2 个答案: