IE 11はfont-sizeを無視します

Question

HTMLとCSSを使用した簡単なナビゲーションバーを作成しました。

IE11では、font-sizeは他のブラウザよりもはるかに小さいです。 私の.cssファイルで私はbody { font-size:16px; }を設定しました。私はその文書に対してデフォルトのfont-sizeを作っています。

他のすべての要素については、em単位を使用します。

私は24pxであるべき、私のナビゲーションバーに<a>ためfont-size:1.5emを設定しますが、IE11はそれを無視し、フォントサイズのみ16pxです。ウェブサイトの他のテキストにも同じことが起こります（h1、h2、span）。

要素を調べると、IE11には1.5emサイズが割り当てられていますが、計算結果は16pxであることがわかります。 他のブラウザ（Edgeを含む）がウェブサイトを適切に表示します。

CODE：

* { 
 
    border: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-decoration: none; 
 
    line-height: normal; 
 
    list-style-position: inside; 
 
} 
 
* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    color: #666; 
 
    font-family: 'Roboto', Arial, Tahoma, sans-serif; 
 
    font-size: 16px; 
 
    font-weight: normal; 
 
    padding: 0; 
 
    margin: 0 auto; 
 
    background-color: #fff; 
 
} 
 
nav#top { 
 
    float: right; 
 
    display: inline-block; 
 
} 
 
nav#top ul { 
 
    list-style: none; 
 
    display: inline; 
 
} 
 
nav#top ul li { 
 
    list-style: none; 
 
    display: inline; 
 
    float: left; 
 
} 
 
nav#top ul li a { 
 
    display: block; 
 
    float: left; 
 
    padding: 30px 10px; 
 
    font-size: 1.5em; 
 
    font-family: 'Lato', sans-serif; 
 
    font-family: 'Arimo', sans-serif; 
 
    color: #fff; 
 
    text-shadow: 1px 1px 1px #060; 
 
}

<nav id="top"> 
 
    <ul class="clearfix"> 
 
    <li><a href="page1/">Label 1</a> 
 
    </li> 
 
    <li><a href="page1/">Label 1</a> 
 
    </li> 
 
    <li><a href="page1/">Label 1</a> 
 
    </li> 
 
    <li><a href="page1/">Label 1</a> 
 
    </li> 
 
    <li><a href="page1/">Label 1</a> 
 
    </li> 
 
    </ul> 
 
</nav>

私は約font-size:100% !importantと同様のソリューションをグーグルが、働く何かを見つけることができませんでした。

Answer 1

これを試してください：

nav#top ul li a { 
    color: #fff; 
    display: block; 
    float: left; 
    font-family: "Arimo",sans-serif; 
    font-size: 24px; 
    padding: 30px 10px; 
    text-shadow: 1px 1px 1px #060; 
} 

Answer 2

これは、すべてのユースケースを遵守していないだろうが、それは劇的に私の頭痛を軽減している方法です。

一般的にクロスブラウザの経験を積むには、本体のタグからフォントサイズを削除し、ブラウザに魔法をかけさせることをお勧めします。

- 一見一目瞭然ですが、設計上の制御が緩んでいるように見えますが、ほとんどのフォントサイズのプロパティを削除すると、一貫した結果が得られることがわかりました。