受 overflow:hidden 影响的元素位置

Question

我遇到了一个（至少对我而言）看起来很奇怪的问题。它是一个菜单，如果您将鼠标悬停在选项卡上，它会扩展其高度并显示菜单项。该选项卡具有属性 overflow:hidden，因此仅当您将鼠标悬停在选项卡上时才会显示项目。现在，真正奇怪的是，当您将鼠标悬停在选项卡上并且它展开时，另一个选项卡的底部似乎跟随第一个选项卡的底部 - 因此当第一个选项卡展开时另一个选项卡向下移动。如果我删除 overflow:hidden，这种行为就会消失！现在，我在这里做了一些 position:absolute 技巧，但我仔细检查了相关部分的相对位置。不过，我不知道是什么原因造成的。

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

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 元素保持对齐。

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

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

受 overflow:hidden 影响的元素位置

Element position affected by overflow:hidden

css

overflow