我的网站上的导航栏出现问题,尤其是<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;
}
答案 0 :(得分:0)
将高度改为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; }
答案 1 :(得分:0)
像这样改变:
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,希望它对你有好处。