IE 11 ignoriert Schriftgröße

Question

Ich habe eine einfache Navigationsleiste mit HTML und CSS.

In IE11 ist die font-size viel viel kleiner als in anderen Browsern. In meiner .css Datei habe ich body { font-size:16px; } gesetzt, die ich einen Standard font-size für das Dokument machen möchte. Für alle anderen Elemente verwende ich em Einheiten.

stelle ich font-size:1.5em für <a> in meine navbar, die 24px sein sollte, aber IE11 ignoriert das und die Schriftgröße ist nur 16px. Das gleiche passiert mit einem anderen Text auf der Website (h1, h2, span).

Wenn ich das Element überprüfe, sehe ich, dass IE11 1.5em Größe als die, die ihm zugewiesen ist, aber das Ergebnis der Berechnung ist nur 16px. Andere Browser (einschließlich Edge) zeigen die Website ordnungsgemäß an.

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>

gegoogelt ich font-size:100% !important und ähnliche Lösung, aber nichts gefunden, das funktioniert.

Answer 1

Bitte versuchen Sie dies:

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

Dies wird nicht bei jedem Anwendungsfall entsprechen, aber es ist die Art und Weise, dass meine Kopfschmerzen dramatisch reduziert hat.

Um eine insgesamt gute Cross-Browser-Erfahrung zu erzielen, würde ich vorschlagen, dass Sie in der Regel Schriftgrößen aus dem Body-Tag entfernen und die Browser ihre Magie machen lassen.

Obwohl es auf den ersten Blick scheint, dass Sie die Kontrolle über das Design verlieren könnten, habe ich gelernt, dass Sie konsistentere Ergebnisse erhalten, wenn Sie die meisten Eigenschaften der Schriftgröße entfernen.