css - 如何不在 IE11 上进行 border-bottom push 和不一致

Question

我怎样才能使我的 border-bottom 在悬停时不扩展父级的 height 但保持它以便一切都保持不变，除了border 是否显示？

此外，在 IE 11 中查看时，border 并不真正位于父级的底部，但您可以看到 1px 空白区域 -之间。我可以做些什么来让它始终如一地工作吗？

JSFiddle Demo

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;
}

HTML5

<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>

Answer 1

为避免高度变化，只需让元素以透明的 border-bottom 开头即可。

li {
    border-bottom: 2px solid transparent;
}

在鼠标悬停时，您需要更改的是 border-bottom-color:

li:hover {
    border-bottom-color: #000;
}

http://codepen.io/anon/pen/EjgJqZ

http://jsfiddle.net/vdptxcg8/1/

我还添加了 transition-duration: 0.2s; 以便以流畅的动画方式而不是突然发生变化。

您报告的 1px 空白问题不会在 IE 11 中发生。