Question

我一直在使用导航栏的flexbox布局，我发现Internet Explorer 11中有一种奇怪的行为。在Chrome，FF或Edge中都不会发生这种情况。我做了一个小提琴演示：

以下是小提琴代码的进一步精简版：

HTML

<form>
  <ul>
    <li>
      <button>Menu item</button>
      <ul id="submenu"><li><button>Submenu item</button></li></ul>
    </li>
  </ul>
</form>

CSS

form {
  display: flex;
  flex-flow: column;
}

button {
  display: inline-block;
}

#submenu {
  display: inline-block;
  position: absolute;
  opacity: 0.5;
}

li:hover #submenu {
  opacity: 1; /* RULE A */
}

button:focus + #submenu {
  opacity: 1; /* RULE B */
}

问题在于，当我将鼠标悬停在外部菜单<ul>上，触发规则A并将子菜单的opacity从0.5更改为1时，外部菜单的高度会增加一个几个像素。如果悬停规则将不透明度设置为0.999，则不会发生这种情况。我不明白为什么元素的不透明度应该影响它的布局，也不知道为什么只有当不透明度变为1而不是0.999时才会发生这种情况！

另外，如果我改为使用RULE B更改子菜单的不透明度，通过Tab键聚焦外部<button>，那么外部菜单中的高度变化不会发生，即使正在应用完全相同的风格。

对于小提琴，我可以通过使用0.999的opacity来解决这个问题，但是这个解决方案对于我遇到此问题的实际项目并不起作用。说出原因并不容易，所以我希望通过理解这个怪癖的潜在机制，我可以想出其他的东西。

Answer 1

当您使用display: inline-block时，可能会出现如此奇怪的间距行为。要解决此问题，您只需执行以下操作即可

分析哪个div具有display: inline-block属性，在您的情况下是#submenu。
将font-size: 0添加到包含display: inline-block的div的父div，在您的情况下为li。使用font-size: 0可以完全删除字体引起的间距。
接下来的最后一步是再次为这些div添加font-size 应该通过添加font-size: initial来显示一些文字，在您的情况下为button。

更新的CSS代码现在看起来像这样

＆＃13;

form {
  display: flex;
  flex-flow: column;
}
ul {
  background: #aaf;
  list-style: none
}
li {
  font-size: 0;
}
button {
  background: #afa;
  font-size: initial;
}
#submenu {
  display: inline-block;
  opacity: 0;
}
li:hover #submenu {
  opacity: 1;
}

＆＃13;

<form>
  <ul>
    <li>
      <button>Menu item</button>
      <ul id="submenu">
        <li>
          <button>Submenu item</button>
        </li>
      </ul>
    </li>
  </ul>
</form>

＆＃13;

IE11 flexbox：影响布局的不透明度

1 个答案: