Html 如何在IE11中直观地隐藏flex项？

我遇到了一个问题，在IE11中，一个可视隐藏的flex项仍然会占用其容器中的空间，尽管它不可见。在flex容器中，我有一个徽标文本（应用了

visuallyhidden

类）、一个徽标背景图像和一个菜单按钮

在Chrome、Firefox和Edge中，容器的内容设置为之间的

空间，徽标位于容器的一端，菜单按钮位于另一端。这是理想的行为

在IE11中，容器左侧有一个很大的空间，好像隐藏的文本仍然存在

如果有人对此有一个解决方案，也许是另一种视觉隐藏文本的方法，我们将不胜感激

我在这里重现了这个问题：


.visuallyhidden{
边界：0；
剪辑：rect（0）；
高度：1px；
保证金：-1px；
溢出：隐藏；
填充：0；
位置：绝对位置；
宽度：1px；
}
标题{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：浅灰色；
最大宽度：1400px；
保证金：0自动；
填充：1em；
}
.标志{
宽度：100px；
高度：100px；
背景图像：url（'https://s2.postimg.org/x1g74vb61/33b869f90619e81763dbf1fccc896d8d--lion-logo-mode.jpg');
背景尺寸：100px 100px；
}
钮扣{
高度：50px；
宽度：50px；
填充：0；
}

菜单
哎呀，解决了。我对那里的标记没有很好的逻辑性

我更改了标记，使其看起来像这样，并按预期工作：

<header>
  <a href="#" class="logo"><h1 class="visuallyhidden">Hidden logo text</h1></a>
  <button>MENU</button>
</header>


菜单
只需将
右边距：auto
添加到徽标中即可。