Question

我遇到的问题（至少在我看来）似乎很奇怪。这是一个菜单，如果您将鼠标悬停在选项卡上，则会展开其高度并显示菜单项。该选项卡具有属性overflow：hidden，因此只有当您将鼠标悬停在选项卡上时才会显示这些项目。现在，真正奇怪的是，当你将鼠标悬停在标签上并且它展开时，另一个标签的底部似乎跟在第一个标签的底部 - 这样另一个标签在第一个标签展开时向下移动。如果我删除溢出，这种行为就会消失：隐藏！现在，我做了一些立场：这里绝对的诡计，但我仔细检查了相关部分的相对位置。不过，我对于可能导致这种情况的想法一无所知。

这是一个非常小的测试用例：

HTML

<div id="menu">
    <div class="menu-tab">Hover here!</div>
    <div class="menu-tab">Or here!</div>
</div>

CSS

#menu {  /* issue disappears without this */
    height: 15pt;
}

.menu-tab {
    display: inline-block;
    height: 100%;  /* required for animation, not affecting behavior */
    overflow: hidden;  /* this one! */
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    transition: height 0.3s ease;
}

.menu-tab:hover {
    height: 500%;
}

JSFiddle

Answer 1

使用选项卡上的vertical-align属性：

#menu {
  /* issue disappears without this */
  height: 15pt;
}

.menu-tab {
  display: inline-block;
  vertical-align: top;
  /* add this */
  height: 100%;
  /* required for animation, not affecting behavior */
  overflow: hidden;
  /* this one! */
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  transition: height 0.3s ease;
}

.menu-tab:hover {
  height: 500%;
}

<div id="menu">
  <div class="menu-tab">Hover here!</div>
  <div class="menu-tab">Or here!</div>
</div>

Answer 2

您需要添加vertical-align:top;，以便inline-block元素保持一致。

＆＃13;

#menu {
  /* issue disappears without this */
  height: 15pt;
}

.menu-tab {
  display: inline-block;
  vertical-align: top;
  /* THIS */
  height: 100%;
  /* required for animation, not affecting behavior */
  overflow: hidden;
  /* this one! */
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  transition: height 0.3s ease;
}

.menu-tab:hover {
  height: 500%;
}

＆＃13;

<div id="menu">
  <div class="menu-tab">Hover here!</div>
  <div class="menu-tab">Or here!</div>
</div>

＆＃13;

受溢出影响的元素位置：隐藏

2 个答案: