Question

为什么要发短信jumps？为什么hover上的边框会扩展菜单的div？

*, *:before, *:after 
{
  -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

div
{
    height: 100px;
    width: 960px;
    margin: 0 auto;
    background-color: #eee;
}

ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li
{
    display: block;
    float: left;
    box-sizing:border-box;
}

li > a
{
    text-decoration: none;
    font-size: 20px;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    padding: 0 18px;
}

li:hover
{
    border-top: 2px red solid;
    border-bottom: 2px red solid;
    background-color: #ddd;
}


<div>
    <ul>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
        <li><a href="#">sdfdf</a></li>
    </ul>
</div>

Answer 1

li没有固定的高度。如果您将li的高度设置为100px，则边框会在悬停时放入元素内。

要防止文字跳跃，您可以删除a边框添加的额外高度，如下所示：

li:hover > a {
    height: 96px; /* 100 - (border-top + border-bottom) */
}

或者您可以为li（demo）添加透明边框和固定高度。

li {
    ...
    border-top: 2px transparent solid;
    border-bottom: 2px transparent solid;
    height: 100px;
}

Answer 2

因为边框仅在悬停时添加到div中。所以在悬停时，div的高度会扩大。如果您将border-top: 2px grey添加到li（处于＆＃39;未发布状态＆＃39;状态），则您不再具有该跳跃效果。

检查更新后的小提琴：http://jsfiddle.net/xg6SJ/3/

Answer 3

li
{
    display: block;
    float: left;
    box-sizing:content-box;
}

因为，border-box ... width和height属性包括填充和边框，但不包括边距。 content-box ...这是CSS标准指定的默认样式。测量宽度和高度属性仅包括内容，但不包括边框，边距或填充。

你是在悬停时添加2px到底部的顶部，而不是之前的。

或者将两个边框像素添加到li，并使边框与背景相同，直到您悬停为止。

li
{
    display: block;
    float: left;
    border-top: 2px #eee; solid;
}

边框风格不会工作

3 个答案: