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

Question

我本以为，如果我给每个元素一个固定的大小，并用一些边距隐藏下划线，然后我去掉该边距，它应该可以正常工作。但每当我将其悬停时，它似乎仍然会跳跃。请帮我理解为什么。

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

.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;*/
}

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

Answer 1

问题在于 .menu-item 元素上的垂直边距 are collapsing父 h1 元素上的默认边距。删除 h1 元素中的默认边距，以防止边距相互折叠(您可以用内边距替换边距)。

Updated Example

.menu-container h1 {
  margin: 0;
  padding: 10px 0;
}

The spec清楚地概述了边距折叠和相邻形成单个边距的规则。由于 float 框之间的边距不会折叠，因此您还可以 float 父 h1 元素(这样做时，您不需要删除默认边距)。

Updated Example

.menu-container h1 {
  float: left;
  width: 100%;
}

此外，inline-block 框的边距也不会折叠。同样，您可以将包装器 h1 元素的 display 更改为 inline-block 以获得相同的结果:

Updated Example

.menu-container h1 {
  display: inline-block;
  width: 100%;
}

作为旁注，我为 float 和 inline-block 元素指定了 100% 的宽度，因为 h1 元素是 block 级的默认情况下，它们的宽度为 100%。您可能想根据您想要的结果删除/更改它。