我怎样才能使我的border-bottom在悬停，不扩展height的父，但保持它，使一切保持不变，除了border显示?
同样，当在IE 11中检查这一点时，border并不是真正在父级的底部，但您可以看到像1px之间的空白。我能做些什么让它一直起作用吗?
JSFiddle演示/strong>
CSS
#main-nav {
overflow: hidden;
border: 1px solid #ddd;
border-width: 1px 0;
margin-top: 70px;
line-height: 38px;
}
.menu {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
float: left;
color: #666;
margin-right: 5px;
}
#search {
float: right;
}
li:hover {
border-bottom: 2px solid #000;
}
<nav id="main-nav">
<ul class="menu">
<li class="active"><a href="#">Test 1</a></li>
<li><a href="#">Test 2</a></li>
</ul>
<form id="search" action="#" autocomplete="off">
<input type="text" id="query" name="query">
</form>
</nav>
为了避免高度的变化，只需让元素已经以透明的border-bottom开始。
li {
border-bottom: 2px solid transparent;
}
当鼠标悬停时，你只需要改变border-bottom-color:
li:hover {
border-bottom-color: #000;
}
http://codepen.io/anon/pen/EjgJqZhttp://jsfiddle.net/vdptxcg8/1/
我还添加了transition-duration: 0.2s;，以使变化以平滑的动画方式发生，而不是突然发生。
您报告的1px空白问题在IE 11中没有发生。