如何在 IE11 中直观地隐藏弹性项目？ [复制]答案

【问题标题】：How to visually hide a flex item in IE11? [duplicate]如何在 IE11 中直观地隐藏弹性项目？ [复制]
【发布时间】：2017-12-13 14:32:16
【问题描述】：

我遇到了一个问题，即视觉隐藏的弹性项目在 IE11 中仍然占用其容器内的空间，尽管它不可见。在 flex 容器中，我有徽标文本（应用了 visuallyhidden 类）、徽标背景图像和菜单按钮。

在容器内容设置为space-between 的 Chrome、Firefox 和 Edge 中，徽标位于容器的一端，菜单按钮位于另一端。这是期望的行为。

在IE11中，容器左侧有很大的空间，好像隐藏的文字还在。

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

我在这里重现了这个问题：https://codepen.io/anon/pen/mwzYLv

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: lightgrey;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1em;
}

.logo {
  width: 100px;
  height: 100px;
  background-image: url('https://s2.postimg.org/x1g74vb61/33b869f90619e81763dbf1fccc896d8d--lion-logo-mode.jpg');
  background-size: 100px 100px;
}

button {
  height: 50px;
  width: 50px;
  padding: 0;
}

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

【问题讨论】：

只需将margin-right: auto 添加到徽标中即可。 codepen.io/anon/pen/QgZeQJ

标签： html css internet-explorer flexbox

【解决方案1】：

糟糕，解决了。我对那里的标记的思考不是很合乎逻辑。

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

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

【讨论】：