IE11でフレックスアイテムを視覚的に隠すには？

Question

私は視覚的に隠されたフレックスアイテムがまだ目に見えないにもかかわらずIE11でそのコンテナ内のスペースを占有するという問題に遭遇しました。フレックスコンテナ内には、ロゴテキスト（visuallyhiddenクラスが適用されています）、ロゴの背景イメージ、およびメニューボタンがあります。

コンテナの内容がspace-betweenに設定されているChrome、Firefox、Edgeでは、ロゴはコンテナの一端にあり、メニューボタンは反対側にあります。これが望ましい動作です。

IE11には、コンテナの左側に大きなスペースがあります。隠れたテキストはまだそこにあります。

誰かがこれを解決する方法を持っている場合、おそらくテキストを視覚的に隠す別の方法があれば、それは非常に感謝しています。

は、私がここでの問題を再現しました：

.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>

Answer 1

https://codepen.io/anon/pen/mwzYLvはおっと、それを解決しました。私はそこに私のマークアップと非常に論理的に考えていませんでした。それは次のようになりますので、

私はマークアップを変更した、それが意図したとおりに動作します：

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