横幅图像中的白框

Question

我正在尝试在我的固定导航栏上添加一个带有 2px 的边框顶部，但是在 href 悬停上，它会将所有导航项向下推 2px，我正在尝试让它成为静态的，任何帮助都值得赞赏。

.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}

.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
overflow: hidden;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
}

.menu-items { display: inline-block; }


.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}

.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}

<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu  -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
</ul>
</div>
</nav>

Answer 1

这是因为没有边界。要么提供相同宽度的透明边框，要么使用边框的颜色。但在你的情况下，它搞砸了。所以我更改了overflow: hidden并使用了margin-top: -2px：

.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
margin-top: -2px;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}

<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu  -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="javascript:ajaxpage('pages/home.php', 'primaryContent');">HOME</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">ABOUT</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">DESIGNS</a></li>
<li><a href="javascript:ajaxpage('pages/about.php', 'primaryContent');">CONTACT</a></li>
</ul>
</div>
</nav>

Answer 2

这都是因为box-sizing属性。 默认情况下，它会在内容区域之外添加填充/边距/边框的值，因此元素会变大。只需全局定义* {box-sizing: border-box;}它将使元素变为固定大小。这意味着如果元素没有边框，然后它添加，元素的内容区域将更小，但整个大小将相同。但是，我强烈建议您在开头使用边框，否则它会跳到元素内部。您可以将颜色设置为"透明"，但它将不可见。然后只需更改边框颜色会更好。

Answer 3

我创建了一个小提琴手：

https://jsfiddle.net/marco_rensch/0hva2241/

这可能是一个可能的解决方案 签出第 31 行和第 51 行之间的 CSS 代码更改

关键是添加一个默认边框 2px 透明到 li 并通过悬停进行更改：

.menu-items li:hover{border-top: 2px solid #72BCD4;}