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

Posted 2023-03-05

【中文标题】IE11 flexbox：影响布局的不透明度

【英文标题】：IE11 flexbox: opacity affecting layout

【发布时间】：2017-03-18 03:32:18

【问题描述】：

我一直在为导航栏使用 flexbox 布局，我注意到 Internet Explorer 11 中的一种奇怪行为。在 Chrome、FF 或 Edge 中不会发生。我做了一个小提琴来演示：

https://jsfiddle.net/6L06251k/

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

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 时发生！

另外，如果我改为使用规则 B 更改子菜单的不透明度，通过 Tab 键将焦点放在外部 <button> 上，那么即使应用了完全相同的样式，外部菜单中的高度也不会发生变化。

对于小提琴，我可以通过使用 0.999 的 opacity 来解决此问题，但此解决方案不适用于我遇到此问题的实际项目。很难说清楚为什么，所以我希望通过了解这个怪癖的潜在机制，我可以找出其他的东西。

【参考方案1】：

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

分析哪个 div 具有display: inline-block 属性，在您的情况下是#submenu。

将font-size: 0 添加到具有display: inline-block 的div 的父div 中，在您的情况下为li。使用font-size: 0，您可以完全消除由字体引起的间距。

下一步也是最后一步是再次将字体大小添加到这些 div 这应该通过添加font-size: initial来显示一些文本，在你的情况下是button。

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

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;

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

【讨论】：

太好了，谢谢 - 这在 the fiddle 和我的主要项目中有效。您是否有任何关于为什么会发生这种情况的信息或资源？我猜这不是现代浏览器中不会发生的事情吗？对我来说，这只是不透明度的一种非常奇怪的行为，而且它受 which 选择器触发 CSS 更改的影响方式特别奇怪。

@JosephO'Donnell 很好，没问题。很高兴能帮上忙。 inline-block 的问题是 div 之间的空白在屏幕上变得可见。因为这是 inline-block 的行为方式，所以实际上你的浏览器有多现代并不重要。其他浏览器正确显示它实际上很有趣。有时您甚至不会注意到空格，但在您的情况下，由于悬停时导航高度的变化，您会注意到它。稍后，如果您不想处理这些空白问题，您可以简单地使用 flex 完成所有操作。

David Walsh 写了一篇关于这个主题的article，甚至指出了更多解决空白问题的方法，但我认为在你的情况下字体大小方法是最好的。

我之前遇到过那篇文章中讨论的情况，但我不确定这正是这里发生的情况！如果元素的不透明度为 0.999，则不会发生该行为，对于内联块空白通常不会发生这种情况。此外，即使我从the fiddle

中的 html 中删除所有空格，问题仍然存在

@JosephO'Donnell 啊，是的，你说得对，我的错。这确实不是因为空白。问题是这两个按钮在 Internet Explorer 中的页面加载时具有不同的高度。如果将 div #submenu 的不透明度设置为 1，您可以看到这一点。如果仔细观察，您可以通过 #submenu 按钮看到，与第一个按钮相比，底部有一个与 ul 重叠的边框。但是，如果您现在将其不透明度设置为小于 1，您将无法再看到底部的边框。现在，当您将鼠标悬停时，不透明度变为 1，边框再次出现。