Question

我本以为如果我给每个项目一个固定的大小并隐藏下划线有一些余量，然后我把那个边距拿走，它应该没有问题。但是每当我将它悬停时，它似乎仍然会跳跃。请帮我理解原因。

https://jsfiddle.net/z5bmatr6/3/这是我到目前为止所得到的：

＆＃13;

.menu-container {
  width: 180px;
  margin: 0 auto;
}
.menu-item {
  background-image: url('../img/menu/main_menu.png');
  background-repeat: no-repeat;
  display: block;
  height: 47px;
  margin-bottom: 20px;
}
.menu-item:hover,
.selected {
  height: 67px;
  margin-bottom: 0;
}
.menu-about {
  background-position: 0 -80px;
  width: 133px;
}
.menu-projects {
  background-position: 0 -147px;
  width: 169px;
}
.menu-now {
  background-position: 0 -212px;
  width: 93px;
}
.menu-contact {
  background-position: 0 -275px;
  width: 164px;
}
/* About & CV */

.about-menu-container {
  width: 250px;
}
.about-menu-container .menu-item {
  background-image: url(http://i.imgur.com/qqEVD6u.png);
  background-size: 352px;
}
.menu-cv {
  background-position: 0px 0px;
  width: 350px;
  /*  height: 54px;
  margin-bottom:10px;*/
}
.menu-text {
  background-position: 0 -95px;
  width: 185px;
  /*height: 42px;*/
}

＆＃13;

<article style="overflow-y: scroll;" class="menu-container about-menu-container">
  <h1><a class="menu-item menu-cv" href='cv.html'></a></h1>
  <h1><a class="menu-item menu-text" href='texts.html'></a></h1>
</article>

＆＃13;

Answer 1

问题在于h1元素are collapsing上的垂直边距与父h1元素的默认边距。从.menu-container h1 { margin: 0; padding: 10px 0; }元素中删除默认边距，以防止边距相互折叠（您可以使用填充替换边距）。

Updated Example

h1

The spec清楚地概述了利润率崩溃和相邻形成单一保证金的规则。由于浮动框之间的边距不会折叠，您也可以浮动父.menu-container h1 { float: left; width: 100%; }元素（这样做，您不需要删除默认边距）。

Updated Example

inline-block

此外，display框的边距也不会崩溃。同样，您可以将包装器h1元素的inline-block更改为.menu-container h1 { display: inline-block; width: 100%; }以获得相同的结果：

Updated Example

inline-block

作为旁注，我为浮动广告100%元素提供了h1的宽度，因为100%元素默认为块级别，宽度为{{1}} 。您可能希望根据所需结果删除/更改此内容。

css：为什么我的背景图像在悬停时会跳跃？

1 个答案: